关于 ios:WKWebView 等效于 UIWebView\\’s scalesPageToFit

WKWebView equivalent for UIWebView's scalesPageToFit

我正在更新我的 iOS 应用程序以将 UIWebView 替换为 WKWebView。但是我不明白如何使用 WKWebView 实现相同的行为。使用 UIWebView 我使用 scalesPageToFit 来确保网页以与屏幕大小相同的大小显示(以便在不滚动的情况下显示全屏)。

我在网上找到了这个解决方案，但是它不起作用：

1
2
3
4

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
NSString *javascript = @"var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');document.getElementsByTagName('head')[0].appendChild(meta);";
[webView evaluateJavaScript:javascript completionHandler:nil];
}

相关讨论

nferocious76 的回答的回声，在 swift 代码中：
Swift2.x 版本

1
2
3
4
5
6
7

let jscript ="var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
let userScript = WKUserScript(source: jscript, injectionTime: WKUserScriptInjectionTime.AtDocumentEnd, forMainFrameOnly: true)
let wkUController = WKUserContentController()
wkUController.addUserScript(userScript)
let wkWebConfig = WKWebViewConfiguration()
wkWebConfig.userContentController = wkUController
let youWebView = WKWebView(frame: CGRectZero, configuration: wkWebConfig)

swift3版本

1
2
3
4
5
6
7

let jscript ="var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
let userScript = WKUserScript(source: jscript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let wkUController = WKUserContentController()
wkUController.addUserScript(userScript)
let wkWebConfig = WKWebViewConfiguration()
wkWebConfig.userContentController = wkUController
let yourWebView = WKWebView(frame: self.view.bounds, configuration: wkWebConfig)

类似于@nferocious76\\'s 但使用 Swift 语言

1
2
3
4
5
6

var scriptContent ="var meta = document.createElement('meta');"
scriptContent +="meta.name='viewport';"
scriptContent +="meta.content='width=device-width';"
scriptContent +="document.getElementsByTagName('head')[0].appendChild(meta);"

webView.evaluateJavaScript(scriptContent, completionHandler: nil)

我想通了下面的灵魂。使内容适合设备尺寸。

1
2
3
4

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) { for making the content to fit with the device size
let jscript ="var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
webView.evaluateJavaScript(jscript)
}

C# 版本，用于 Xamarin 自定义渲染器：

1
2
3
4
5
6
7
8
9

string jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

WKUserScript wkUScript = new WKUserScript((NSString)jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
WKUserContentController wkUController = new WKUserContentController();
wkUController.AddUserScript(wkUScript);

WKWebViewConfiguration wkWebConfig = new WKWebViewConfiguration();
wkWebConfig.UserContentController = wkUController;
WKWebView webView=new WKWebView(Frame, wkWebConfig);

将以下内容添加到我的 HTML 脚本对我有帮助。

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

和 UIWebView 中的 scalePageToFit 一样。

参考：如何设置 iOS WkWebview 缩放比例

Swift 5 解决方案：

1
2
3
4
5
6
7
8

let javaScript ="""
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width');
document.getElementsByTagName('head')[0].appendChild(meta);
"""

webView.evaluateJavaScript(javaScript)

这对我有用，我在 meta 中添加了两个属性：initial-scale=1.0, shrink-to-fit=yes，这有助于将文本与 html 匹配在 html 中有一个大图像。

1
2
3
4
5
6
7
8
9
10
11
12
13

let jscript ="var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0, shrink-to-fit=yes'); document.getElementsByTagName('head')[0].appendChild(meta);"

let userScript = WKUserScript(source: jscript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

let wkUController = WKUserContentController()

wkUController.addUserScript(userScript)

let wkWebConfig = WKWebViewConfiguration()

wkWebConfig.userContentController = wkUController

self.webView = WKWebView(frame: self.view.bounds, configuration: wkWebConfig)

这些答案都不适合我。我试图为特定艺术家打开一个亚马逊 URL。原来亚马逊有一个移动响应 URL 和一个桌面 URL。在桌面版 Safari 上，我更改为 iPhone 作为用户代理(开发 > 用户代理 > Safari - iOS 13.1.3 - iPhone)并获得了相应的移动 URL。

这对我来说可以使图像尺寸适合 Swift 5 的设备宽度
对来自服务器的动态 html 很有帮助

1
2
3
4
5
6
7
8
9
10

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {

let fontAdjust ="var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);"

let imgAdjust ="var style = document.createElement('style');style.innerHTML = 'img { display: inline;height: auto;max-width: 100%; }';document.getElementsByTagName('head')[0].appendChild(style);"
webKitView.evaluateJavaScript(imgAdjust)

webKitView.evaluateJavaScript(fontAdjust)
webKitView.evaluateJavaScript(imgAdjust)
}

// 100% 为我工作

1
2
3
4
5
6
7
8
9
10

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
//print(#function)
let scriptFontSizeAdjustment ="var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);"

let scriptImgSizeAdjustment ="var style = document.createElement('style');style.innerHTML = 'img { display: inline;height: auto;max-width: 100%; }';document.getElementsByTagName('head')[0].appendChild(style);"

webKitView.evaluateJavaScript(scriptFontSizeAdjustment)
webKitView.evaluateJavaScript(scriptImgSizeAdjustment)

}