Iphone X display


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


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 . . .


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


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


: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 …


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…


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


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


(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)


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 . . .

	   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 . . .


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


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


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% ??


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



Anything on the full screen issue ??


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