WKWebView 等效于 UIWebView 的 scalesPageToFit答案

【问题标题】：WKWebView equivalent for UIWebView's scalesPageToFitWKWebView 等效于 UIWebView 的 scalesPageToFit
【发布时间】：2014-12-05 09:05:21
【问题描述】：

我正在更新我的 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];
}

【问题讨论】：

试试这个：NSString* js = @"var meta = document.createElement('meta'); " "meta.setAttribute( 'name', 'viewport' ); " "meta.setAttribute( 'content', 'width = device-width' ); " "document.getElementsByTagName('head')[0].appendChild(meta)"; [webView stringByEvaluatingJavaScriptFromString: js]; 用上面的代码替换你的代码。
我试了一下，但结果相同（顺便说一下，WKWebView 中不存在 stringByEvaluatingJavaScriptFromString 方法，所以我保留了我的 evaluateJavaScript:completionHandler 调用
您找到解决方案了吗？

标签： ios wkwebview

【解决方案1】：

你也可以试试 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 添加其他配置。

【讨论】：

像魅力一样工作。谢谢
对我很有用 - 唯一的小调整就是将 WKUserScriptInjectionTimeAtDocumentEnd 更改为 WKUserScriptInjectionTimeAtDocumentStart
如果我将 WKUserScriptInjectionTimeAtDocumentEnd 更改为 WKUserScriptInjectionTimeAtDocumentStart 那么它对我不起作用。它不添加此脚本。有什么原因吗？
不错的答案，但我也会添加此脚本以避免 webkit 自行更改字体大小：var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
效果很好。我试图使用 WKWebView 将特殊标题与自动布局对齐。在我添加这个脚本之前，来自 offsetHeight 的元素高度一直返回太大。感谢您的帮助。

【解决方案2】：

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版本

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)

【讨论】：

【解决方案3】：

类似于@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)

【讨论】：

谢谢！这也解决了我的问题，使 html 字体变大，没有从小到大刷新。我用它来“刷新”内容字体大小和内部布局。

【解决方案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)
}

【讨论】：

这是唯一对我有用的东西，非常感谢

【解决方案5】：

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

【讨论】：

像魅力一样工作！
自定义渲染器长什么样？你继承自WkWebViewRenderer 吗？因为Control 和SetNativeControl() 都是未知数...
好吧，看来你需要从ViewRenderer<CustomWebView, WKWebView>继承并使用OnElementChanged(ElementChangedEventArgs<CustomWebView> e)。
感谢您的帮助，它确实帮助解决了我的 Xamarin.Forms 问题，即 HTML 被截断，即使我根据 DidFinishNavigation 中的内容调整高度的大小

【解决方案6】：

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

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

它与 UIWebView 中的 scalePageToFit 相同。

参考：How to set iOS WkWebview zoom scale

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

这对我有用，我在 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)

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

这对我来说适合 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)
}

【讨论】：

【解决方案11】：

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

}

【讨论】：