IOS wkwebview 响应式设计没有填满全屏

Question

信息：

Xcode 9, SWIFT 4, Ipad pro 12,9 2 gen（但是我试过的所有iPad模拟器都是一样的）

我有一个网络视图，它显示了一个响应式设计网页。

当我在 iPhone 模拟器上运行它时，它看起来不错。并充满了整个屏幕。但是当我运行它在Ipad模拟器上的时候，响应式设计并不认为它是一个大屏幕。一般设置，小屏菜单是三横，大屏是导航栏。

所以即使 webview 在 iPad 上填满了整个屏幕，页面也只占屏幕的四分之一，并且只有三行菜单。如果我在 Ipad 模拟器的 Safari 中打开相同的 URL，我会得到带有导航栏的正确布局。

在网页上，在 header 中，我有这个和那个，一般来说，在各种设备和 browsers/webviews 上给出了正确的结果，但在 iPad 上却没有（模拟器）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我发现一些帖子提到我可以做一些 javascript 以使其扩展，但没有任何效果。当我尝试获取 webView.bounds.size.width 时，它给我的值为 375，这显然太小了，然后我尝试手动将其设置为 2000，但没有效果。

有人知道吗？

import UIKit
import WebKit
class ViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()

        let url = URL(string: "https://mit.gsv.dk")!
        webView.load(URLRequest(url: url))

        var scrw = webView.bounds.size.width

       scrw = 2000
       /*
       let javascript = "document.querySelector('meta[name=viewport]').setAttribute('content', 'width=\(scrw);', false); "
      webView.evaluateJavaScript(javascript)
      */

        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)

    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }
}

Answer 1

您的代码在 UIviewcontroller 中是完美的。您需要在故事板中设置约束以将左、右、上和下对齐为 0。

IOS wkwebview 响应式设计没有填满全屏

IOS wkwebview responsive design not fill full screen

ios

swift

wkwebview

responsive