CODEWITHSUNDEEP
htmliosxcodeuiwebviewscale
pixelbitlabs
pixelbitlabs

Reputation: 1934

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

Upvotes: 3

Views: 13605

Answers (4)

Cullen SUN
Cullen SUN

Reputation: 3547

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

    }
}    
}

Upvotes: 8

Luke
Luke

Reputation: 11476

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

Upvotes: 3

Nekto
Nekto

Reputation: 17877

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.

Upvotes: 1

Cullen SUN
Cullen SUN

Reputation: 3547

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

Upvotes: 1

Related Questions