WKWebView not staying flush with status bar

Question

So I can't figure out what to do. I'm just starting with Xcode and am liking it so far. I've read about constraints but I just can't figure out or find any help online with what's going wrong here...

Basically I want the WebKit flush with the top status bar but it moves per device and gives an ugly border on the top of the iPad whereas it's flush on the iPhone X.

See some images here: https://imgur.com/a/Q47KdM3

I need it to scale with each device so the web view is flush with the status bar on each device.

Answer 1

From what I have seen in the images you posed, you don't have any layout constraints for the WebView, which I think explains what you are seeing. Without those constrains, the view will not be resized to fit various devices. Below is what I would suggest for constraints if you want things "flush" to top and bottom bars (important to place the constraint against the SafeArea). To add these constraints drag the web view to the edges of the display until you see the a dotted blue line and then click the button that looks like a tie-fighter (second button from right) and then click the red dotted |---| symbols to apply constraints in each direction.

This should give you layouts that look like this:

When running in the simulator, you get the the results shown below. You can see things look a bit different on the iPhone X devices, but this how things are designed on those devices to make sure the controls are accessible. One thing I did notice was that the grey area you see in Xcode for the web view, does not correctly move when you change the orientation or size of the device in Xcode. However, the edges of the display do move correctly so I would chalk that up to a bug Xcode.

Really hope that helps. I remember being very confused when it came to constraints when I first started. It takes a bit to get your head around things.

iPhone 8 iPhone 8 landscape iPad iPad Landscape iPhone X iPhone XR