WKWebView 视口缩小以适应在 iOS 9.3 上不起作用

Posted

技术标签:

【中文标题】WKWebView 视口缩小以适应在 iOS 9.3 上不起作用【英文标题】:WKWebView viewport shrink-to-fit not working on iOS 9.3 【发布时间】:2016-08-06 14:17:24 【问题描述】:

ios 9.2 中,WKWebView 呈现 html 的固定宽度表格大于设备宽度,可以通过添加这样的视口标签来缩小内容以适应:

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

这一行导致 WKWebView 有效地缩小视口,以便整个渲染页面适合视图框架,而无需滚动条。例如,考虑以下代码,当在 vanilla 单视图应用程序的 viewDidLoad 中运行时:

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 中运行的相同代码呈现如下:

(虽然截图看不到,但有水平滚动条)

在 *** 和其他地方搜索其他问题,似乎大多数其他人更喜欢 9.3 的行为。但是,我需要 9.2 的收缩以适应的行为。所以,我的问题是:有谁知道如何在 9.3 中获得相同的收缩以适应行为?有谁知道这种变化是故意的,还是将在后续版本中修复的错误?

我的测试代码可以在https://github.com/nsolter/NSWebViewShrinkTest找到,特别是https://github.com/nsolter/NSWebViewShrinkTest/blob/master/NSWebViewShrinkTest/ViewController.m

【问题讨论】:

【参考方案1】:

我向 Apple 提交了错误报告,这是回复:

“不,我们不想保持缩小以适应的行为。解决方法是使用正确描述内容宽度的视口元标记。”

我试过了。如果在 viewport 标记中指定 html 呈现后实际宽度的宽度,它将正确显示在您的设备宽度上。在我上面的示例中,表格宽度为 700,如果您指定:&lt;meta name=\"viewport\" content=\"width=700, shrink-to-fit=YES\"&gt;

然后页面将显示没有水平滚动条。

但请注意,您不能指定初始比例视口属性。然后它不会以适当的宽度显示。

这显然不太理想,因为在渲染之前您通常不知道渲染的 html 的宽度是多少。我目前的解决方案是先用width=device-width渲染一次,然后再用width=X再渲染一次,其中X是第一次渲染页面的实际宽度。

【讨论】:

我也在使用 width=device-width 并面临同样的问题。您是否正在重新加载 width= X 的页面?? 基本上,是的。我实际上是在当前未显示的新 WKWebView 中呈现它,然后在该新 webview 中进行交换。 你有样品吗? 我现在没有任何可以分享的开源项目。 好的!如果您有机会创建示例,请回复

以上是关于WKWebView 视口缩小以适应在 iOS 9.3 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

WKWebView - 放大后内容不合适

如何缩小字体以适应 Android 中视图的内部宽度?

WKWebView runJavaScriptAlertPanelWithMessage 从 iOS 9.3 崩溃

离子电容 WKWebView 视口高度不一致

当 iPad 处于纵向时,缩小 Mobile Safari 视口宽度?-

HTML 页面未在 iPhone/iPad 上纵向调整大小