Just curious.
Has anyone found a solution to make iPhone X (and up) full screen in Xcode?
viewport-fit works for the background, but the elements move to the left.
This layout is based on 667x375
Viewport-fit:
No viewport-fit:
My first guess would be that you need to make the size 812 x375 instead of 667, since this is an iPhone X? I'd need to see your Xcode project to know more.
I don't recall any more info than was in this previous thread:
But if someone else has gotten a great iPhone X full screen experience in a WKWebView please chime in 
.
The iPhone X comes between, the 8 and the iPad.
I have tried with 3 scenes, bit this doesn’t work. Xcode doesn’t recognise the 812x375 resolution.
My workaround at the moment: put a rectangle at each side of the 667 resolution and fill this with some extras. But I never managed to get a fullscreen iPhone X. There’s always the safe area background visible.
Here’s my Xcode- and Hype project. With my solution to have a better screen fit.
If you add viewport-fit, you will see that the screen moves to the left. Removing it, centers the screen.
The other hype file has 3 scenes: iPhone8, iPhone X and iPad. Xcode skips the X scene.
test sizes.zip (158.0 KB)
test.hype.zip (21.2 KB)
That doesn't seem right. What do you get in Xcode for UIDevice.current.name?
Although, you probably don't even need an Xcode solution. Basically, I usually have Xcode just make the box as big as possible. Then, using JavaScript, math can be used to get the screen ratio. If 16:9, then show one scene, if something else then show another.
Well, I’m not a coder. A couple of things in JS. That’s it. @Markhunte’s template helps me a lot. And you’re Wrapping app.
The rest is a sort of abacadabra for me.
Does the answer outlined in this post do what you want?
Basically just add this to the top of the WKWebViewController.swift file:
class FullScreenWKWebView: WKWebView {
override var safeAreaInsets: UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
}
And then when allocating/initializing the web view, use FullScreenWKWebView instead of WKWebView:
webView = FullScreenWKWebView(frame: .zero, configuration: wconfiguration)
4 Likes
Wow! That worked. Thank you very very very much.
I have ‘some’ (understatement) work to do, but I don’t mind.
@MarkHunte
Will you update your template with this solution? It makes it even better to work with.
2 Likes
Hi,
The forum is like a jojo at the moment.
Djon
1 Like
Will do when I get a mo…
1 Like