ios swift view wkwebview safearealayoutguide

How do I set the safe zone size by device?

I want to set a safety zone by device. My web view is set to SafeArea above, SuperView below. After the iPhone X series, the value of Y is 44 because of the notch area. But for the iPhone 6 and iPhone 8, 44 is too wide. How do I adjust it?

Area of the current WKWebView

Load WebView Area from Current Swift5

@IBOutlet var WKWebView: FullScreenWKWebView!
...
        let config = WKWebViewConfiguration()

        contentController.add(self, name: "goApp")

        config.userContentController = contentController

        WKWebView = FullScreenWKWebView(frame: WKWebView.frame, configuration: config)

        WKWebView.uiDelegate = self
        WKWebView.navigationDelegate = self
        WKWebView.scrollView.delegate = self
        view.addSubview(WKWebView)
        view.addSubview(indicator)
...
class FullScreenWKWebView: WKWebView {
    override var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

I want to set the Top SafeArea area by device.

I am trying things, but is unsuccessful.

I've set constraints, but the screens on the right and below are cut, and the top is still too wide for the iPhone 6.

Top part of iPhone 6

Solution

I cannot set the top area of WKWebView as a safety zone unconditionally. Because the safety area includes the NavigationController Bar Area. But I don't use the NavigationController. Therefore, it is not possible to set the safety zone as a constraint.

So I solved the problem by separating by device size.

Set Main Story Board

Adjusting WKWebVIew's Height and Y-Values according to Device Height

let screenHeight = UIScreen.main.bounds.size.height
if screenHeight > 667 {
            WKWebView = FullScreenWKWebView(frame: CGRect( x: 0, y: 44, width: WKWebView.frame.width, height: WKWebView.frame.height - 44 ), configuration: config)
        } else {
            WKWebView = FullScreenWKWebView(frame: CGRect( x: 0, y: 20, width: WKWebView.frame.width, height: WKWebView.frame.height - 20 ), configuration: config)
        }