How do I set the safe zone size by device?

Question

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

why are you setting top above the safe area? give constraint from the safearea! — Ketan Parmar, Nov 11 '19 at 10:04
@Lion I set it to SafeArea for the iPhone X. 44. The value of my y No more than a safe zone. But the gap is too wide for models like the iPhone 6 because it is a fixed price. — iosbegindevel, Nov 12 '19 at 00:29
@Lion I'm sorry but I'm a beginner of Swift and xcode and I don't know what to do — iosbegindevel, Nov 12 '19 at 00:30

IloneSP · Answer 1 · 2019-11-12T09:14:29.553

0

Make the constraint anchored to the safe area and give it the desired value. It will automatically adjust to all devices.

Here you can see a UIView with blue background, anchored top and bottom to the safe area with a 0 value (you can increase the value if you want more distance to the safe area).

The view will be automatically drawn giving the proper distance to the safe area (which is 44 for iPhone X or above, and 0 for iPhone 8 and below).

edited Nov 12 '19 at 09:14

answered Nov 11 '19 at 10:13

IloneSP

429
2
13

I'm sorry but I'm a beginner of Swift and xcode and I don't know what to do. – iosbegindevel Nov 12 '19 at 00:27
@iosbegindevel Edited the answer to give more details. – IloneSP Nov 12 '19 at 09:15
Did you saw my revised question? I don't think you've seen my revised question. – iosbegindevel Nov 13 '19 at 07:39
Remove the -44 value from the top constraint. – IloneSP Nov 13 '19 at 08:46
The top is displayed correctly, but the right screen and the bottom screen are clipped. – iosbegindevel Nov 14 '19 at 05:22

score 0 · Accepted Answer · answered Nov 12 '19 at 07:56

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

iPhone 6

iPhone X and after

@Lion Here's how I solved the problem: Is this the right way ? — iosbegindevel, Nov 12 '19 at 07:57