Iphone X display


#1

How to make a full-blown display on iphone x?
Construct 2 + canvas +


#2

Add a viewport meta tag in the head of your html

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

make sure the " viewport-fit=cover " is there… Hopefully it will fix it. . .

If you need more than that look for css function env(…) with arguments - safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, or safe-area-inset-bottom . . . (will work for webview+ but may not work for canvas+ )

Hope this helps and let me know if everything works . . .


#3

Thank you for reply!
Already tried…
I’ll try again with webview +, maybe I’m missing something


#4

can you please post a screenshot of your game on iPhone X?


#5

:frowning_face: I didn’t quite understand, how I can fix this…
I think that the problem is caused with compilation and the secret is somewhere on the core level of the cocoon browser …


#6

Is viewport-fit=cover working in webview+ ?? It should, as it uses WKWebView . . . But for canvas+, I think Ludei must fix this in canvas+ implementation . . . If I find something I’ll let you know . . . And if you happen to find a solution, please do share . . .

Till then, mentioning @Blue_Sialia . . . please look into this…


#7

Thank you!
I’ll try today fix it…
I use canvas+ because in webview+ I get error “CordovaLocalWebServer tag is not src”, but I guess, this is canvas+ plugin in the project - I remove it from the project


#8

I tried several variants, I use webview+ - get error, but using webview is fine, but the display of the screen remains unchanged (
Used cocoon ver. 2.1.0 because in 2.2.0 sound not working


#10

Well, for the audio in webview & webview+, you should use .m4a . . . For the full screen issue, please make sure you have the viewport-fit=cover in meta tag and the following css for the canvas tag in the head section of index.html . . .

canvas{
	   display: block;
	   position: absolute;

	       width: 100%;
    	   height: 100%;

	   bottom: 0px;
	   top: 0px;
	   left: 0px;
 }

try this with both webview and canvas+ . . . I don’t use construct 2, so I don’t know about the “CordovaLocalWebServer tag is not src” error with webview+ . . . To be honest, cocoon suggests to use canvas+ for c2 games . . . maybe it’s a c2 specific issue… I think you should ask on Construct 2 forum / Scirra Forums about that . . .


#11

Do you have an example of webview+ working on iPhoneX? Seems like no matter what I do I still get the black margins and even with the viewport-fit=cover


#12

Could there be a plugin or some config xml setting that could prevent viewport-fit from working?


#13

I am currently working on a game that I intend to release on ios . . . I’m aware of the iPhone X issue and gathering knowledge about it . . . But since you guys are saying that none of them are working, then I guess it’s a CocoonJS issue and needs to be fixed by Ludei . . . One question though, have you tried applying the CSS on canvas tag, I mean set the width & height to 100% ??


#14

You can go with 2.2.0.
Sound is working fine for me in the latest version.

Best
Andy


#15

Anything on the full screen issue ??


#16

Not from my side.
@Blue_Sialia @imanolm1 any news on the Iphone X display support?

Best,
Andy


#17

Hello!
Not yet, but today I’ll try it


#18

Anything on this folks? I’m planning to launch an app with this platform in a couple of days but without iPhoneX support this seems iffy.
I’ve tried everything under the sun. I’m using launch storyboards and removed the old splash display, viewport fit cover is set. Not sure what else I can do. If this isn’t resolved before April this software will become useless to future apple developers.


#19

Ok definitely something on ludeis end. I got the app looking great on iPhone X using Cordova and wkwebview. I just created a Cordova app and reinstalled all of my plugins from my cocoon settings.
Most important plugin is the launch screen plugin. Then add the launch screen images to the res folder and in the config xml like so

And tada! App fills the iPhone X display screen.


#20

@imanolm1 anything on this ???


#21

None of the described did not work in conjunction with C2…
In the config there are no resources for uploading pictures, and therefore, I do not know whether it is worth writing them…