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

`webView.scalesPageToFit` should be set to `NO` to allow zooming — Nekto, Aug 31 '11 at 10:26
thanks for your comment! I've tried that but it doesn't work unfortunately :'( — pixelbitlabs, Aug 31 '11 at 10:42
http://stackoverflow.com/questions/8214503/zooming-on-uiwebview/24009062#24009062 — iPatel, Jun 03 '14 at 07:10

Cullen SUN · Accepted Answer · 2011-08-31T14:15:16.403

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.
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;"//.

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

    }
}    
}

http://stackoverflow.com/questions/8214503/zooming-on-uiwebview/24009062#24009062 — iPatel, Jun 03 '14 at 07:11

score 3 · Answer 2 · answered Aug 31 '11 at 11:11

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

score 1 · Answer 3 · answered Aug 31 '11 at 10:34

1

some webpages are mobile site, fixed size. e.g. you use iPhone safari to open Google's home page

answered Aug 31 '11 at 10:34

Cullen SUN

3,517
3
32
33

I have even tried adding the meta tag viewport in but it still won't work! :( – pixelbitlabs Aug 31 '11 at 10:42
Can you show code? or tell us which page are you loading? Thanks. – Cullen SUN Aug 31 '11 at 10:47
sure - http://pastie.org/2459324 and the URL of the page is http://www.dhsb.org/index.phtml?d=190350 :-) – pixelbitlabs Aug 31 '11 at 10:50

score 1 · Answer 4 · answered Aug 31 '11 at 11:09

1

I've tried your link (dhsb.org/index.phtml?d=190350) to open in Safari on my i4 and it works, as you've described (text overlaps the screen and zooming is off). So the problem is in the website, not in your code.

answered Aug 31 '11 at 11:09

Nekto

17,837
1
55
65

How to allow zooming of UIWebView (tried everything)

4 Answers4

Linked