Force iOS UIWebView to 1024px, not 1027px

Question

I have a UIWebView shown in an iPad screen (iOS7, landscape). The web page is exactly 1024 x 768.

If I inspect the view at runtime (using revealapp.com) I can see the width of the UIWebView is 1024px. However, it contains a UIWebBrowserView within it, which is showing as 1027px wide.

The upshot of this is that the user can scroll the web page 3px horizontally, which is annoying. It should fit perfectly and be "locked" when the page loads. I still allow pinch zooming using these settings.

self.webView.delegate = self;
self.webView.scrollView.bounces = NO;
self.webView.scalesPageToFit = YES;

If I inspect the DOM of the webpage running in the app using Safari, I can see that the web page itself is definitely 1024px wide. So, it seems iOS is causing the problem.

So... does anyone know how I can force the UIWebBrowserView to 1024px rather than 1027px?

Thanks

Tobin

Answer 1

There are two things you could try here:

1. Zoom in the content using the scrollView property of your UIWebView by setting it's contentSize to your desired size (you may need to play with the contentOffset , too, until you get it right).

2. Set an appropriate viewport meta tag on your web page to control the layout on a mobile device. Something along these lines:

   <meta name="viewport" content="width=device-width, initial-scale=1">

Hope this helps.