113

我正在更新我的 iOS 应用以替换UIWebView为WKWebView. 但是我不明白如何使用WKWebView. UIWebView我曾经确保网页以scalesPageToFit与屏幕尺寸相同的尺寸显示（以便在不滚动的情况下显示全屏）。

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

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

11 回答 11

138

你也可以试试 WKUserScript。

这是我的工作配置：

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

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

于 2014-10-27T07:51:09.253 回答
48

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)

迅捷3版

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)
于 2016-11-27T14:40:32.390 回答
25

类似于@nferocious76，但使用 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)
于 2016-06-17T11:54:55.513 回答
17

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

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)
}
于 2019-08-30T11:15:44.730 回答
14

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);
于 2017-03-27T14:00:21.187 回答
10

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

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

它与 UIWebView 中的 scalePageToFit 相同。

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

于 2020-01-21T09:07:09.750 回答
5

斯威夫特 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)
于 2020-04-03T09:27:11.313 回答
2

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

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)
于 2020-08-19T09:05:59.140 回答
1

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

于 2020-07-09T16:54:41.657 回答
0

这对我来说适合 Swift 5 的设备宽度内的图像大小对
来自服务器的动态 html 很有帮助

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)
}
于 2021-01-30T06:46:31.720 回答
-1

// 100% 为我工作

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)

}
于 2020-06-03T12:13:28.677 回答