iphone - UIWebView -- load external website, programmatically set initial zoom scale, and allow user to zoom afterwards

Question

Is it possible to do all of the above? SO has given me a great way to set the initial zoom scale here. Namely, to include the following line in my webViewDidFinishLoad method:

[webView stringByEvaluatingJavaScriptFromString: @"document.body.style.zoom = 5.0;"];

But what I still can't do is allow the user to change the zoom scale after the program initially sets it. If I set scalePagesToFit to NO, the user can't change the zoom scale. And if I set scalePagesToFit to YES, it overrides my programmatic zoom.

Can anyone help?

EDIT: thanks for the response. But if I zoom the scrollView, things blur a little.

Answer 1

You can add or modify a <meta name='viewport' tag to achieve this. Apple documentation on the meta/viewport tag here:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Here's an example of adding the tag once the document is loaded:

- (void) webViewDidFinishLoad:(UIWebView *)webView
{
    NSString* js = 
    @"var meta = document.createElement('meta'); " 
     "meta.setAttribute( 'name', 'viewport' ); " 
     "meta.setAttribute( 'content', 'width = device-width, initial-scale = 5.0, user-scalable = yes' ); " 
     "document.getElementsByTagName('head')[0].appendChild(meta)";

    [webView stringByEvaluatingJavaScriptFromString: js];        
}

If the web page you're loading provides an existing meta tag you may need to modify it rather than attempting to add a new meta element to the DOM. This SO question discusses the technique:

Can I change the viewport meta tag in mobile safari on the fly?

In my test app I set the UIWebView scalesPageToFit to YES.