Ok so before the problems we were having were only on iPhoneX in landscape orientation, portrait orientation displayed correctly, I released a game in portrait mode that worked great. Today I try testing a new portrait orientation game on iPhoneX and now portrait orientation is broken?!? There is a gap at the top of the viewport and the status bar always shows up.

https://imgur.com/a/qi0a7u8

Things to note

1. Whether or not you check hide status bar in the C3 export dialog, when you open your xcode workspace, hide status bar is ALWAYS unchecked in the settings.

2. Checking hide status bar in Xcode does not fix the problem, the status bar always shows up.

3. Setting viewport-fit to either cover or auto, the game still shows up the same, white bar at the top and status bar showing.

twg Ashley

I found a fix for this. I really wonder why they take so long to fix this. This is not what i should do, i should be playing at graphics and designing games, not looking at some core code.

Put the misery aside.

Fix:

Go to your www/c2runtime.js

line 5761 and add this code inside:

var metaelement = document.querySelector('meta[name~="viewport"]'); var metacontent = metaelement && metaelement.getAttribute("content"); if(!metacontent.includes("cover")){ offy = (h - newh) / 2; h = newh; }

Isnt "cover" suppose to cover the top and not scaling it?! For the landscape part i didnt test. I leave it to the development team.

Image version:

This is actually quite pissing me off. Last time the portrait mode was fine, and now it is broken. Seems like nobody is fixing it even after a few months. I bought construct 3 for almost a year(basically i wasted my money) and i cant launch a single game due to this issue. Changing CSS and index.html doesnt even work for me NOW.

The reason i bought construct 3 is i dont want to mess with cordova, but now i feel i really wasted my time and money.

I still haven't had any luck with this issue, no updates on the C3 issues Git either.

Sorry guys, i have been busy on the past month. I manage to find away today. I dig into the xcode project and looked around.

Add this into the style.css

— only screen

and (device-width : 375px)

and (device-height : 812px)

and (-webkit-device-pixel-ratio : 3)

and (orientation : portrait) {

html {

height: 812px !important;

width: 375px !important;

}

}

— only screen

and (device-width : 375px)

and (device-height : 812px)

and (-webkit-device-pixel-ratio : 3)

and (orientation : landscape) {

html {

width: 812px !important;

height: 375px !important;

}

}

And you can start tackle the issue from there.

Remember to delete the platform first then re-add it again.

Steps:

1) Export from construct 3(cordova project)

2) Extract the file and add the code above into style.css

3) add ios platform for cordova

4) Add ur iphoneX splash screen.

Things should work fine but you might need to adjust some part.

Remember to delete the existing app in the phone, sometimes it may cache it.