3

我将 WKWebView 子视图添加到 PhoneGap / Cordova 4.0+ 应用程序中（通过cordova-plugin-wkwebview-engine）并使用编程自动布局约束使 WKWebView 的大小与 MainViewController 的视图相同。

当我查看 WKWebView 的边界时，它与 MainViewController 视图的边界相匹配。

但是使用Javascript 来检查内容大小，特别是看起来像这样的脚本：

var body = document.body; 
var html = document.documentElement;
Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.offsetHeight);

这返回的高度实际上约为 WKWebView 边界高度的 1/2 到 2/3（在 iPad Pro 模拟器上，我将边界高度设置为 1024.0，但 Javascript 报告的内容高度仅为 735.0）。而且我只显示了我想显示的非调整大小的 Vue.js 内容的一半。

由于我无法显示我正在使用的实际内容（NDA 很有趣！），我实际上注意到我在 PhoneGap/Cordova 中传递到 WKWebView的任何URL 都会出现问题。这是 apple.com 在我的应用程序中的样子： 底部边缘被切断

在 Mobile Safari（在模拟器中运行）中，它应该是正确大小的版本：

更多正在显示

您可以看到顶部栏项目的间距不同（在桌面上它们应该从窗口的任一侧缩进）并且底部边缘显示更多，因为 Web 视图的内部高度更高。

为了解决我的问题，我已经完成了所有工作，从将 WKWebView 实例化从viewDidLoadout 移动到viewDidAppear，还尝试“硬编码”将静态 iPad Pro 大小的帧大小传递到[WKWebView initWithFrame:]，但内容大小保持在 735.0.0。在模拟器的移动版 Safari 和桌面版 Safari 中，相同的内容呈现精美（且正确）。

如何强制 WKWebView 的内容大小与父视图的边界相匹配？

如果您想在 iPad Pro 模拟器上看到这个错误，我在https://github.com/dautermann/phonegap-air有一个公共 github 存储库。请务必获取“演示问题”分支。

4

2 回答 2

1

简短的回答：

你需要检查contentSize你WKNavigationDelegate的webView:didFinishNavigation:方法，直到这里你只得到 735.0contentSize和你的 JavaScript 代码一样。

再长一点的答案

当你创建你的WKWebView时，它在'sframe中具有相同的大小。它不会改变，直到自动布局发挥它的魔力，即直到你的.initwithFrameframeviewDidLayoutSubviewsUIViewController

在这一点上，您有一个WKWebView涵盖主要视图的视图，但您的网站contentSize不是您所期望的。因为你的网站还没有。

您需要设置webView.navigationDelegate = {delegate}监听导航事件。delegate在通过webView:didFinishNavigation:方法调用之前，您的网站不存在 %100 。从现在开始，您可以测量期望值contentSize。

希望有帮助。

于 2017-03-03T15:19:33.337 回答
1

我认为您遇到的问题与 WebView 没有直接关系。这与以下事实有关：出于向后兼容性的原因，在 iPad Pro 上运行的“旧”应用程序没有获得“原始分辨率”，而是使用 iPad 1024x768。

说服 Apple 您了解 iPad Pro 及其原始分辨率的方法是指定一些 LaunchScreen 故事板。是的，这有点令人惊讶，但这就是它的本质（例如参见https://forums.developer.apple.com/thread/17193）。如果我OTAApplication在 GitHub 上修改您的测试项目中的目标并指定标准CDVLaunchScreen，因为Launch Screen File一切对我来说都很好。

更新

根据Force iPad Pro to full resolution without Launch Screen如果您使用 XCode 8，只需为 iPad Pro 指定适当分辨率的启动图像就足够了。虽然没试过。

于 2017-03-06T16:51:44.680 回答