WKWebView视口缩小到适合在iOS 9.3上不起作用 [英] WKWebView viewport shrink-to-fit not working on iOS 9.3
问题描述
在iOS 9.2中，可以通过添加如下所示的视口标签来告知WKWebView呈现HTML，该HTML的固定宽度表大于设备宽度，以缩小内容以适合内容:
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">
此行使WKWebView有效地缩小了视口，从而使整个呈现的页面适合视图框架，而无需滚动条.例如，在普通单视图应用程序的viewDidLoad中运行时，请考虑以下代码:
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];
内容呈现如下:
但是，此行为在9.3中已更改.在9.3中运行的相同代码如下所示:
However, this behavior has changed in 9.3. The identical code running in 9.3 renders like this:
(尽管您无法在屏幕截图中看到它，但是有一个水平滚动条)
(Although you can't see it in the screenshot, there is a horizontal scrollbar)
搜索关于stackoverflow和其他地方的其他问题，似乎大多数其他人更喜欢9.3行为.但是，我需要9.2的行为以适应收缩.因此，我的问题是:有人知道如何在9.3中获得相同的缩小以适应"行为吗?有人知道此更改是否是有意的，还是会在后续版本中修复的错误?
Searching other questions on stackoverflow and elsewhere, 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?
我的测试代码可以在 https://github.com/nsolter/NSWebViewShrinkTest 中找到 https://github.com/nsolter/NSWebViewShrinkTest/blob/master/NSWebViewShrinkTest/ViewController.m
My test code can be found at https://github.com/nsolter/NSWebViewShrinkTest, specifically https://github.com/nsolter/NSWebViewShrinkTest/blob/master/NSWebViewShrinkTest/ViewController.m
推荐答案
我向Apple提交了错误报告，这是响应:
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."
我尝试了这个.如果在视口标签中指定了HTML呈现后的实际宽度，则它将在设备宽度上正确显示.在上面的示例中，如果您指定表格宽度为700，则请输入:<meta name=\"viewport\" content=\"width=700, shrink-to-fit=YES\">
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: <meta name=\"viewport\" content=\"width=700, shrink-to-fit=YES\">
然后该页面将显示，没有水平滚动条.
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.
这显然不是理想的，因为您通常不知道呈现的HTML的宽度，直到您呈现它.我当前的解决方案是先用width = device-width渲染一次，然后再用width = X渲染一次，其中X是第一次渲染页面的实际宽度.
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.
这篇关于WKWebView视口缩小到适合在iOS 9.3上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
