WKWebView viewport shrink-to-fit not working on iOS 9.3

Question

Created Apr ’16

Replies 1

Boosts 0

Views 20k

Participants 1

In iOS 9.2, a WKWebView rendering HTML with fixed-width tables bigger than the device width could be told to shrink the content to fit by adding a viewport tag like this:

<meta name="viewport" content="width=device-width, shrink-to-fit=YES">

This line caused the WKWebView to effectively zoom out the viewport so that the entire rendered page fit in the view frame without the need for scrollbars. For example, consider the following code, when run in viewDidLoad in a vanilla single view app:

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];

WKWebView *newWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0,40,self.view.frame.size.width, self.view.frame.size.height - 40) configuration:wkWebConfig];

NSString *toRender = @"<head><meta name=\"viewport\" content=\"width=device-width, shrink-to-fit=YES\"></head><body><table width=700 style='background-color: blue; color:white; font-size=20px'><tr><td>this is some text that is long enough to exceed the width of the iphone 6 unless shrink-to-fit is applied</td></tr></table></body>";

[newWebView loadHTMLString:toRender baseURL:nil];

[self.view addSubview:newWebView];

The content renders as I expect on ios 9.2, with the view zoomed out so that the entire width of the table is visible in the device width.

However, this behavior has changed in 9.3. The identical code running in 9.3 does not zoom out the view. Basically, on 9.3, it always behaves as if shrink-to-fit=NO.

It seems like most other people prefer the 9.3 behavior. However, I need the 9.2 behavior, of shrink-to-fit. So, my question is: does anyone know how to get the same shrink-to-fit behavior in 9.3? And does anyone know if this change is intentional, or a bug that's going to be fixed in subsequent releases?

My test code can be found at https://github.com/nsolter/NSWebViewShrinkTest, specificallyhttps://github.com/nsolter/NSWebViewShrinkTest/blob/master/NSWebViewShrinkTest/ViewController.m

(cross-posted from http://stackoverflow.com/questions/36633066/wkwebview-viewport-shrink-to-fit-not-working-on-ios-9-3)

Boost

Answer 1

nsolter OP

Apr ’16

I filed a bug report with Apple, and this is the response:

"No, we don’t want to maintain shrink-to-fit behavior. The workaround is to use a viewport meta tag that correctly describes the width of the content."

I tried this out. If, in the viewport tag, you specify a width of the actual width of the html after it's rendered, it will display properly on your device width. In my example above, with a table width of 700, if you specify:

Then the page will display without horizontal scrollbars.

Note that you can't specify an initial-scale viewport property, though. Then it doesn't display with the proper width.

This is obviously less than ideal, because you generally don't know what the width of your rendered html will be until you render it. My current solution is to render it once with width=device-width, then render it again with width=X, where X is the actual width of the rendered page the first time.

0