iOS WKWebView 状态栏填充

Posted 2023-02-23

【中文标题】iOS WKWebView 状态栏填充

【英文标题】：iOS WKWebView Status Bar Padding

【发布时间】：2017-07-31 17:00:52

【问题描述】：

我一直在无休止地寻找可行的答案。我正在尝试创建一个非常简单的 WKWebView 应用程序来包装 Web 应用程序。我不需要任何花哨的东西，因为导航控件都在应用程序中。

目前我的 ViewController.swift 文件如下所示：

https://gist.github.com/andrewweaver/4a0e13245f185e8f31ba812b91f7dddd

Swift 版本： Apple Swift version 3.1 (swiftlang-802.0.53 clang-802.0.42)

问题是状态栏的填充，我想调整它，使状态栏不在内容的顶部，因为它在这里：

任何帮助将不胜感激，因为我是 ios 开发的新手。我也希望能够更改状态栏的颜色，但目前不是当务之急。

【参考方案1】：

要完全在 html/CSS 中执行此操作（这将涉及您对 HTML 的控制），您需要将 viewport-fit=cover 添加到元 viewport 标记中。这告诉设备您希望 webview 填满整个屏幕，包括“安全区域”（例如状态栏后面）。

但您还需要动态调整填充以处理 iPhone X，它具有更大的状态栏区域并包括用于扬声器和摄像头的凹槽。

幸运的是，Apple 为安全区域插图公开了一些 CSS 常量，因此您可以利用 CSS 中的这些常量： 即padding-top: constant(safe-area-inset-top);

我写了更多关于这个场景和 iOS 11 和 iPhone X 的新 CSS 功能：https://ayogo.com/blog/ios11-viewport/

---

如果您没有控制正在加载的 HTML/CSS，那么您可以禁用 Web 视图的安全区域行为：

if #available(iOS 11.0, *) 
    webView.scrollView.contentInsetAdjustmentBehavior = .never;

请注意，在 iPhone X 上，这可能会导致内容无法访问并被缺口遮挡。

【讨论】：

这很有用。最后我使用了自动布局约束而不是这个解决方案，但它有助于定位。

【参考方案2】：

我使用自动布局约束解决了这个问题，请检查

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate 

        var webView: WKWebView!


        override func viewDidLoad() 
            super.viewDidLoad()


            setupWebView()

            let url = URL(string: "https://www.google.com")
            let request = URLRequest(url: url!)
            webView.load(request)
    

    func setupWebView() 
            let webConfiguration = WKWebViewConfiguration()

            webView = WKWebView(frame:.zero , configuration: webConfiguration)
            webView.uiDelegate = self
            //view = webView
            view.addSubview(webView)
            webView.translatesAutoresizingMaskIntoConstraints = false

            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":webView]))
            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":webView]))
    

        override func didReceiveMemoryWarning() 
                super.didReceiveMemoryWarning()
                // Dispose of any resources that can be recreated.
        

希望对您有所帮助。

【讨论】：

很高兴我能帮上忙

此解决方案不适用于 iPhone X。您必须将垂直约束设置为顶部布局指南，而不是硬编码距屏幕顶部 20 像素的偏移量。

【参考方案3】：

let screenWidth = UIScreen.main.bounds.width
let screenHeight = UIScreen.main.bounds.height

self.webView = WKWebView(frame:CGRect( x: 0, y:UIApplication.shared.statusBarFrame.size.height, width:screenWidth, height: screenHeight ), configuration: WKWebViewConfiguration() )

确保导入 UIKit。 兼容所有设备没有状态栏问题