WkWebView and iPhone X

As I said before using @MarkHunte 's xCode template works great. But there is still a problem with showing the app full screen on iPhone X and up.
I managed to fool xCode a bit by putting some information outside the scope of the chosen breakpoint of 667.
It looks like this on iPhone 8 etc.

and like this on the X

But it would be nice to get a full screen result on the X.
Is this even possible?

Are you meaning for your app to use the safe areas.

A quick look around…

I know playing with the safe areas allows views to slip under the notch, but I have only done it with the new SwiftUI. I can look later when I get back.

But can you explain more on if your app is launching as full screen or user inter action to go to full screen.

What area are you classing as fullscreen.

Also note this is not an issue with the Xcode Templates but with iOS/iPhone.

If a solution can be found it is likely you can add the code to your Template file.

I find it difficult to design around the notch. This web page might have useful info…

It would be nice indeed to find a way to use the safe areas.
I want to get rid of the dark areas. If they can have the same background color as the app has, it would already look much better.

Thank you, I’ve seen and tried with no result.:disappointed_relieved:

1 Like

Well, I’m not a fan of the notch. This is one of the reasons I changed the 10-year plan. Designing for the notch was slowing me down. There is another solution. It’s more difficult…

Evaluate JavaScripthttps://www.hackingwithswift.com/example-code/wkwebview/how-to-run-javascript-on-a-wkwebview-with-evaluatejavascript

Basically, and theoretically, you can use Swift to detect the device that is in use. If it’s an iPhone with a notch, you can load the scene that has been specifically designed for that device.

Although, I have been batting with this issue while building “Apparatuses”. I went with the CSS fix.

Is that not what you’re trying to do?

Basically, I have a background image. I use CSS to keep the content off the notch, but the background pattern can fill the notch to make it look nicer.

I’m guessing that the stack overflow answer that @MarkHunte posted is the solution, in combination with a meta tag for viewport-fit cover.

We recently ran into a lot of issues getting it right for the Hype Reflect update and had to rely on the tips from this post:

I’m not sure if the same issues apply to your app though since it sounds like yours is always fullscreen.

You’re welcome to post the xcode project, I think it is important that we’d have a canonical answer if possible for this.


Started a new project with the old files.
Used viewport-fit = cover and I managed to get an even background. But: only when Portrait mode is activated (in xcode) and after turning the phone to portrait mode and back again to landscape. This is half of what I want because the app is landscape only.

1 Like