iPhone X, XS, XR, Screen Size (Black Bars Problem)

Been stuck for weeks trying to resolve this issue I followed all the Tips to support Multiple "Screen Sizes" but I still get Black bars on iPhone X, XS, XR making impossible to release games on ios.

Settings that I tried:

-Pick up a 16.9 aspect ratio resolution

-(Scale Inner/Scale Outer)

Also

-Many Tutorials that requires to modify the config.xml & index.Html adding some lines of code

But nothing seems to work

Is anyone successfully resolved this issue?

Ashley

construct 3 has already this option but what about construct 2?

there a lot of us still using c2 because can't move to c3 yet and you still selling c2 at double the price, wouldn't you fix this bug that prevents c2 to export to ios, I understand you are busy with c3 but some critical bugs like this I think it should be addressed as a respect to (current c2 users supporters & Future buyers of c2) or at least can you give us some guidance or tutorial of what to do to fix it our self I believe Nepeo can help with that as he already Fixed that on C3.

This has been going on for almost two years iPhone X was first released on 3 November 2017 and still, we haven't got a Fix

Hey tarek2 are you exporting as an app or just trying to get support for a HTML export?

We actually made some changes to how C2 projects are built on the build service to try and improve this issue. Although I realise there's probably still a couple of steps that would need resolving in addition. If your not a C3 sub then it's going to be a bit harder, but I will try to help.

Hi Nepeo

is for an App to the App Store

-I export with Cordova from c2 min iOS 9.0+

Then I tried both options:

-build from PhoneGap

-Or Build from Cordova Cli locally, I tested with Version (8.1.2 & 9.0.0) + Xcode 10

Thanks for your help Nepeo I really appreciated, I don't mind to do it my self even if it's difficult as long I have some guidance or tutorial of what to do, I followed many tutorials but none of them seems to work.

Okay so our current approach to patching a C2 project for the buildservice to resolve this is as follows:

- set the cordova "fullscreen" flag to FALSE

- add the "cordova-plugin-statusbar" plugin to the project

- append the following chunk of javascript

;(function () {
	var previousWidth = -1;
	var previousHeight = -1;

	function tick ()
	{
		requestAnimationFrame(tick);

		var isPortrait = window.innerWidth < window.innerHeight;

		var height = isPortrait ? window["screen"]["height"] : window["screen"]["width"];
		var width = isPortrait ? window["screen"]["width"] : window["screen"]["height"];

		if (previousHeight == height && previousWidth == width)
			return;

		previousHeight = height;
		previousWidth = width;

		var docStyle = document["documentElement"].style;
		var bodyStyle = document["body"].style;

		if (height && width)
		{
			bodyStyle["height"] = docStyle["height"] = height + "px";
			bodyStyle["width"] = docStyle["width"] = width + "px";
		}
	}

	function enterFullscreen ()
	{
		// ios - hide statusbar
		if (typeof window["StatusBar"] === "object")
			window["StatusBar"]["hide"]();

		// android - hide status and nav bar
		if (typeof window["AndroidFullScreen"] === "object")
			window["AndroidFullScreen"]["immersiveMode"]();
	}

	document.addEventListener("deviceready", function () {
		var ua = navigator.userAgent;
		var isMicrosoftEdge = /edge\\//i.test(ua);
		var isIE = (/msie/i.test(ua) || /trident/i.test(ua) || /iemobile/i.test(ua)) && !isMicrosoftEdge;
		var isiPhone = (/iphone/i.test(ua) || /ipod/i.test(ua)) && !isIE && !isMicrosoftEdge;	// treat ipod as an iphone; IE mobile masquerades as iPhone

		enterFullscreen();
		if (isiPhone && window["screen"])
			tick();
	});
})();

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

Nah append it to the end of the c2runtime.js file. It runs when the app starts and hides the statusbar ( making it fullscreen ). It also runs a little block which corrects the window size, as the iPhone X forces the window to the wrong size...

Yes install from the cordova CLI. I would typically add it to the config.xml before running "prepare" to hydrate the project, but if the project has already been hydrated then "npm install" is fine.

I believe that's the latest version is 9.0.1 so you should be good.

In your config.xml the icon and splashscreen file paths should be relative to the cordova project root, not the platform specific project

	<splash src="www/icons/default@2x~universal~anyany.png">

Hi Nepeo sorry for late replay but my phone updated automatically to ios 12.4 and I had to reinstall the new Xcode 10.3 and update the macos.

In your config.xml the icon and splash screen file paths should be relative to the cordova project root, not the platform specific project

Even when I enter the right Path still gives the Black Screen.

I made a simple Demo Empty project with one sprite and no Events to show you.

Looks to me that is in the right path and that I followed everything that you showed me, but I could be wrong as I don't use or mess with this config.xml etc...

C2 File: https://www.dropbox.com/s/0qphvcmu9kxjfrw/iphonexs%20sreen%20test.zip?dl=0

Some of the Xcode settings that I tested:

Here is a video to show the result, is doing some weird scrolling when is at the black screen and I'm touching

https://www.dropbox.com/s/syt0mp9qh3rzvwp/black%20screen.mov?dl=0

Hi Nepeo

No luck with this I tried all different ways I could think off and also I tried all the tutorials that I found on the internet, all tutorials mostly are the same as you recommended, some added a few more lines but mostly all look the same. I think could be a bug on c2.

Do you have any working example of an empty project made on c2? that could help me a lot to see what is problem