Search code examples
htmliosxcodeuiwebviewscale

How to allow zooming of UIWebView (tried everything)


I have tried literally every bit of code I have found to try and make this one page zoom in and out but no matter what, the text still overlaps the screen and the page in the UIWebView will simply not fit to the screen.

I've tried instructions here: http://www.iphonedevsdk.com/forum/iphone-sdk-development/9112-uiwebview-zoom-pinch.html

I've tried adding: webView.scalesPageToFit = TRUE;

I've set it to UserInteractionEnabled.

But nothing seems to work at all.

Is this to do with the coding of the webpage or is it to do with the UIWebView?

Thank you,

James


Solution

    1. First of all. Refer to UIWebView Class reference, you need to set scalesPageToFit.

      Apple says: scalesPageToFit If YES, the webpage is scaled to fit and the user can zoom in and zoom out. If NO, user zooming is disabled. The default value is NO.

    2. If you view the source of the page, you should be able to find //meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"//.

      In order to show you the Zoom effect. I want to replace it with: //meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=5.0; user-scalable=1;"//.

    3. Run the following javascript for UIWebview's method stringByEvaluatingJavaScriptFromString: in - (void)webViewDidFinishLoad:(UIWebView *)webView{ }

      function setScale(){
      var all_metas=document.getElementsByTagName('meta');
      if (all_metas){
          var k;
          for (k=0; k<all_metas.length;k++){
              var meta_tag=all_metas[k];
              var viewport= meta_tag.getAttribute('name');
              if (viewport&& viewport=='viewport'){
                  meta_tag.setAttribute('content',"width=device-width; initial-scale=1.0; maximum-scale=5.0; user-scalable=1;");
              }
      
          }
      }    
      }