WKWebView 等效于 UIWebView 的 scalesPageToFit

我正在更新我的 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];
}
77562 次浏览
小开

you can also try the 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 添加其他配置。

小开

类似于@nfercious76，但是用的是 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)
小开

这是76号残忍回答的回声，用迅捷的密码写道: 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)

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

C# version, for use in Xamarin Custom Renderer:

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

为了使内容与设备尺寸相匹配，我在下面找到了解决方案。

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

将下面的代码添加到我的 HTML 脚本中对我很有帮助。

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

It does the same as scalePageToFit in UIWebView.

参考资料: 如何设置 iOSWkWebview 缩放比例

小开

快速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)
小开

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)


}
小开

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

小开

这对我来说很有用，我在 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)
小开

这适合我的工作，以适应宽度的设备为 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)
}
小开

在扩展中使用的现代 Swift 代码

extension WKWebView {


func addInitialScaleMetaTag() {
evaluateJavaScript(
"""
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "initial-scale=1.0";
document.getElementsByTagName('head')[0].appendChild(meta);
""") { result, error in
// handle error
}
}

}


提交答案