ios WKWebView 相当于 UIWebView 的 scalesPageToFit

WKWebView equivalent for UIWebView's scalesPageToFit

提问by olinsha

I am updating my iOS app to replace UIWebViewwith WKWebView. However I don't understand how to achieve the same behavior with WKWebView. With UIWebViewI used scalesPageToFitto ensure the web pag was displayed with the same size as the screen size (so as to appear full screen without scrolling).

我正在更新我的 iOS 应用程序以替换UIWebView为WKWebView. 但是我不明白如何使用WKWebView. 随着UIWebView我用scalesPageToFit，以确保网络PAG与相同大小的屏幕尺寸显示（从而出现全屏幕无需滚动）。

I found that solution on the web however it does not work :

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

- (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];
}

回答by nferocious76

you can also try the WKUserScript.

你也可以试试 WKUserScript。

here's my working config:

这是我的工作配置：

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

WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;

wkWebV = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig];

you can add additional configuration to your WKWebViewConfiguration.

您可以向 WKWebViewConfiguration 添加其他配置。

回答by air_bob

Echo of nferocious76's answer, in swift code: Swift2.x version

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

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 version

swift3 版本

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)

回答by Efe Ariaroo

Similar to @nferocious76's but in Swift language

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

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)

回答by fire in the hole

C# version, for use in Xamarin Custom Renderer:

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

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);

回答by Ankita

I figured out below soultion. For making the content to fit with the device size.

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

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)
}

回答by Hepsiba

Adding the below to my HTML script helped me.

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

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

It does the same as scalePageToFit in UIWebView.

它与 UIWebView 中的 scalePageToFit 相同。

refer: How to set iOS WkWebview zoom scale

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

回答by Alexander Nikolenko

Swift 5 solution:

斯威夫特 5 解决方案：

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)