Struggling to Understand the Relationship Between Frame Size and Viewport Size in UIWebView

iOS
2015-09-11 09:53 (10 years ago)
Struggling to Understand the Relationship Between Frame Size and Viewport Size in UIWebView

iOS Simulator 8.4

Here's how to create a UIWebView that's slightly smaller than the screen,

CGSize displaySize = screenSize;
int leftOffsetPercent = 5;
int topOffsetPercent = 5;

CGRect webViewFrame = CGRectMake( displaySize.width / 100 * leftOffsetPercent, displaySize.height / 100 * topOffsetPercent, displaySize.width / 100 * (100 - leftOffsetPercent * 2), displaySize.height / 100 * (100 - topOffsetPercent * 2) ); self.webView = [[UIWebView alloc] initWithFrame:webViewFrame];

When I loaded and displayed an HTML with a ViewPort Meta specified like this:

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

A horizontal scroll bar appeared, and the content did not fit within the WebView.

Since it's an iPhone 6, displaySize.width is 375, and webView.frame.size.width is 337.5. It seems that the viewport's device-width is judged to be this 375.

Out of curiosity, when I obtained window.innerWidth within the browser, it was 338, but when I checked document.body.clientWidth, it was 375. I couldn't understand why this was happening.

I was puzzled about how to remove the horizontal scroll bar, but in the end, I tried dynamically rewriting the meta tag in the HTML as follows:

var viewPortMeta = $('meta[name="viewport"]');
viewPortMeta.attr('content', "width=" + (window.innerWidth - 1) + ", initial-scale=1");

Although I think it's a rather forceful method, it worked. The horizontal scroll bar disappeared.

Currently unrated
The author runs the application development company Cyberneura.
We look forward to discussing your development needs.

Categories

Archive