以编程方式更改 WKWebView 内容大小
programmatically change WKWebView content size
我将 WKWebView 子视图添加到 PhoneGap / Cordova 4.0+ 应用程序中(通过 cordova-plugin-wkwebview-engine) and 使 WKWebView 的大小与 MainViewController 的视图相同。
当我查看 WKWebView 的边界时,它与 MainViewController 视图的边界匹配。
但是使用 Javascript to inspect the content size,特别是看起来像这样的脚本:
var body = document.body;
var html = document.documentElement;
Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.offsetHeight);
这个 returns 高度实际上是 WKWebView 边界高度的 1/2 到 2/3(在 iPad Pro 模拟器上我将边界高度设置为 1024.0 但 Javascript 报告内容高度仅为 735.0)。而且我只显示了一半我想显示的非调整大小 Vue.js 内容。
由于我无法显示我正在使用的实际内容(NDA 有趣!),我实际上注意到 any URL 问题发生了进入 PhoneGap/Cordova 内的 WKWebView。这是 apple.com 在我的应用程序中的样子:
在 Mobile Safari 中(运行 在模拟器中)应该 大小正确的版本:
您可以看到顶部栏项目的间距不同(在桌面上,它们应该从 window 的任一侧稍微缩进)并且在底部边缘显示更多,因为网络视图的内部高度更高。
为了解决我的问题,我做了一切,从将 WKWebView 实例化从 viewDidLoad
移到 viewDidAppear
,还尝试了 "hard coding" 静态 iPad Pro -sized 帧大小被传递到 [WKWebView initWithFrame:]
,但内容大小保持在 735.0。同样的内容在模拟器的移动版 Safari 和桌面版 Safari 中呈现得非常漂亮(并且正确)。
如何强制 WKWebView 的内容大小匹配父视图的边界?
如果您想在 iPad Pro 模拟器上看到这个错误,我在 https://github.com/dautermann/phonegap-air. Be sure to fetch the "demonstrate-issue" 分支有一个 public github 仓库。
简答:
您需要在 WKNavigationDelegate
的 webView:didFinishNavigation:
方法中检查 contentSize
,直到此处您使用 JavaScript 代码只能得到 735.0 作为 contentSize
.
稍微长一点的回答
当您创建 WKWebView
时,它的 frame
与 initwithFrame
的 frame
大小相同。它不会改变,直到自动布局发挥其魔力,即直到 UIViewController
.
中的 viewDidLayoutSubviews
方法
此时,您有一个覆盖主视图的 WKWebView
,但您网站的 contentSize
不是您所期望的。因为你的网站还没有。
您需要设置webView.navigationDelegate = {delegate}
来监听导航事件。在通过 webView:didFinishNavigation:
方法调用 delegate
之前,您的网站不会出现 %100。从现在开始,您可以测量预期的 contentSize
值。
希望对您有所帮助。
我认为您遇到的问题与 WebView 没有直接关系。这与以下事实有关,即出于向后兼容性的原因 "old" iPad Pro 上的应用程序 运行 不会获得 "native resolution" 而是使用 iPad 1024x768。
让 Apple 相信您了解 iPad Pro 及其原始分辨率的方法是指定一些 LaunchScreen 故事板。是的,这是一种有点令人惊讶的方式,但事实就是如此(参见示例 https://forums.developer.apple.com/thread/17193)。如果我在 GitHub 上修改测试项目中的 OTAApplication
目标并将标准 CDVLaunchScreen
指定为 Launch Screen File
,一切对我来说都很好。
更新
根据 如果您使用 XCode 8,可能只需为 iPad Pro 指定适当分辨率的启动图像就足够了。不过还没试过。
我将 WKWebView 子视图添加到 PhoneGap / Cordova 4.0+ 应用程序中(通过 cordova-plugin-wkwebview-engine) and
当我查看 WKWebView 的边界时,它与 MainViewController 视图的边界匹配。
但是使用 Javascript to inspect the content size,特别是看起来像这样的脚本:
var body = document.body;
var html = document.documentElement;
Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.offsetHeight);
这个 returns 高度实际上是 WKWebView 边界高度的 1/2 到 2/3(在 iPad Pro 模拟器上我将边界高度设置为 1024.0 但 Javascript 报告内容高度仅为 735.0)。而且我只显示了一半我想显示的非调整大小 Vue.js 内容。
由于我无法显示我正在使用的实际内容(NDA 有趣!),我实际上注意到 any URL 问题发生了进入 PhoneGap/Cordova 内的 WKWebView。这是 apple.com 在我的应用程序中的样子:
在 Mobile Safari 中(运行 在模拟器中)应该 大小正确的版本:
您可以看到顶部栏项目的间距不同(在桌面上,它们应该从 window 的任一侧稍微缩进)并且在底部边缘显示更多,因为网络视图的内部高度更高。
为了解决我的问题,我做了一切,从将 WKWebView 实例化从 viewDidLoad
移到 viewDidAppear
,还尝试了 "hard coding" 静态 iPad Pro -sized 帧大小被传递到 [WKWebView initWithFrame:]
,但内容大小保持在 735.0。同样的内容在模拟器的移动版 Safari 和桌面版 Safari 中呈现得非常漂亮(并且正确)。
如何强制 WKWebView 的内容大小匹配父视图的边界?
如果您想在 iPad Pro 模拟器上看到这个错误,我在 https://github.com/dautermann/phonegap-air. Be sure to fetch the "demonstrate-issue" 分支有一个 public github 仓库。
简答:
您需要在 WKNavigationDelegate
的 webView:didFinishNavigation:
方法中检查 contentSize
,直到此处您使用 JavaScript 代码只能得到 735.0 作为 contentSize
.
稍微长一点的回答
当您创建 WKWebView
时,它的 frame
与 initwithFrame
的 frame
大小相同。它不会改变,直到自动布局发挥其魔力,即直到 UIViewController
.
viewDidLayoutSubviews
方法
此时,您有一个覆盖主视图的 WKWebView
,但您网站的 contentSize
不是您所期望的。因为你的网站还没有。
您需要设置webView.navigationDelegate = {delegate}
来监听导航事件。在通过 webView:didFinishNavigation:
方法调用 delegate
之前,您的网站不会出现 %100。从现在开始,您可以测量预期的 contentSize
值。
希望对您有所帮助。
我认为您遇到的问题与 WebView 没有直接关系。这与以下事实有关,即出于向后兼容性的原因 "old" iPad Pro 上的应用程序 运行 不会获得 "native resolution" 而是使用 iPad 1024x768。
让 Apple 相信您了解 iPad Pro 及其原始分辨率的方法是指定一些 LaunchScreen 故事板。是的,这是一种有点令人惊讶的方式,但事实就是如此(参见示例 https://forums.developer.apple.com/thread/17193)。如果我在 GitHub 上修改测试项目中的 OTAApplication
目标并将标准 CDVLaunchScreen
指定为 Launch Screen File
,一切对我来说都很好。
更新
根据