iOS WKWebViewステータスバーの埋め込み

Question

私は無限にこれが動作する答えを探しています。私は非常に単純なWebアプリケーションをラップするWKWebViewアプリケーションを作成しようとしています。ナビゲーションコントロールがすべてアプリケーション内にあるので、私は何も気にする必要はありません。

現在、私のViewController.swiftファイルは次のようになります。

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

スウィフトバージョン： Apple Swift version 3.1 (swiftlang-802.0.53 clang-802.0.42)

問題は、ステータスバーのパディングで、私はそれを調整したいと思いますステータスバーはここにあるようにコンテンツの上には表示されませんでした：

私はiOS開発に非常に新しいので、助力をいただければ幸いです。私はまた、ステータスバーの色を変更することができるようにしたいと思いますが、現時点では直ちに問題になることはありません。

Answer 1

私は、自動レイアウトの制約を使用して、この問題を解決し、

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. 
     } 
} 

を確認してください、それがお役に立てば幸いです。

Answer 2

HTML/CSSでこれを完全に行うには（viewport-fit=coverをviewportというタグに追加することをお勧めします）。これは、「安全な領域」（ステータスバーの背後など）を含めて、Webビューを画面全体に表示させたいことをデバイスに伝えます。

しかし、ステータスバーの領域が大きく、スピーカーとカメラのノッチが含まれているiPhone Xを処理するために、パディングを動的に調整することも必要です。あなたのCSSでそれらを活用することができるように

は幸運なことに、Appleは、安全なエリアインセットのためのいくつかのCSS定数を公開： すなわち、padding-top: constant(safe-area-inset-top);

私は、このシナリオとのための新しいCSS機能についてもう少し書きましたiOSの11とiPhone X：あなたがロードされているHTML/CSSを制御できません場合https://ayogo.com/blog/ios11-viewport/

---

、あなたは、あなたのWeb表示用に安全な領域の動作を無効にすることができます

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

iPhone Xでは、これによりコンテンツにアクセスできなくなり、ノッチによって覆い隠される可能性があることに注意してください。