Talking about Game development, HTML5, iOS and Javascript.
One of the most interesting things you can do once you have built your HTML5 game is to port it on mobile devices as native apps using automatic cloud services like Cocoon.io or using the official developer SDK once you wrapped it with Cordova. Everything worked easy and fine… until iPHone X come to the market. If you create a Xcode project with Cordova, and run in on an actual iPhone X or in the simulator like in next picture with Stack the Crates running on it – download it for your Android devices! – you will see something like this:
What are those two white – or any other color, according to your <body> background – areas? It’s some kind of “safe area” to make websites show appropriately in the strange iPhone X display, and can be fixed adding an attribute to viewport meta.
The attribute is viewport-fit=cover.
viewport-fit has three possible values:
contain: The viewport should fully contain the web content. This means position fixed elements will be contained within the safe area on iOS 11.
cover: The web content should fully cover the viewport. This means position fixed elements will be fixed to the viewport, even if that means they will be obscured. This restores the behaviour we had on iOS 10.
auto: The default value, in this case it behaves the same as contain.
The latest Cordova distribution does not add viewport-fit configuration, so you should add it by yourself in your index.html file.
Let’s have a look at the game now:
<meta name = "viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width viewport-fit=cover">
Much better, but it still shows two little black areas. How can you make the game fill the entire screen? The answer is in next picture: Cordova did not add the launch images for iPhone X.
Without launch images, the game is not able to know the actual iPhone size and won’t cover the entire screen.
We have to create two images, the portrait image is called Default-2436h.png and its size is 1125×2436, while the landscape image is called Default-Landscape-2436h.png and its size is 2436×1125.
Both images must be saved in platform/ios/YOURGAMENAME/Images.xcassets/LaunchImage.launchimage folder.
And finally here we go:
Now, you only have to design your UI keeping in mind you have two black spots, but only on iPhone X. If you don’t want to bother with iPhone X strange screen, just do not upload any launch image for iPhone X, your game will look nice anyway.
And we managed to bring a HTML5 game even on the iPhone X, covering the entire screen. Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.