How to allow zooming of UIWebView (tried everything)

Question

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

Answer 1

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;");
           }
   
       }
   }    
   }
   

Answer 2

I looked at the page source for the link you provided in the comments, and found this:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

This is what is "locking" the viewport down and not allowing for zooming.

You'll find some good information and the tags better explained here:

https://developer.mozilla.org/en/mobile/viewport_meta_tag