Is it possible to remove full-screen status bar on iOS?

Hello, so I have this code that makes the iOS 20px white bar go away:

window.parent.document.querySelector("meta[name=viewport]").setAttribute("content", "width=device-width, UIScrollViewContentInsetAdjustmentNever, minimumscale=0.25, maximumscale=5, height=1024, user-scalable=yes, initial-scale=1, viewport-fit=cover");

But, annoyingly, the status bar at the top still stays there, like so:


Is it possible to remove this?

1 Like

Hi @ThePastaNebula,

I am not sure that’s possible on iOS, unless you are using a PWA. Then if your user installs your web-app (Playcanvas page) as a shortcut in his home screen, you can use a number of meta-tags to disable it:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

I’ve never tried this though!

Hello @Leonidas,
Everytime I try and change the original code (I just copy+pasted and changed the meta name to the correct one to do this), it just gives me an error. I’m not sure how I can make the content=yes

Sorry, I am not sure if that code works or if you can change it using javascript, after the HTML document has been parsed by Safari. Try testing your code in a blank HTML doc outside of Playcanvas as a starting point, to see if the fix currently works on iOS.

What I sent above works only in a PWA.

Ok, I’ll try some other stuff and see if I can get it to work! :slight_smile:

1 Like

Hi @Leonidas,
say I made a HTML file inside of my project - how would I apply this to the game? HTML doesn’t count as scripts for some reason.

Yes, adding HTML/CSS to your game is slightly different than adding scripts. But pretty easy in my opinion.

You can take a look in this tutorial: https://developer.playcanvas.com/en/tutorials/htmlcss-ui/

1 Like

Okay, thanks, I’ll definitely try this! :slight_smile:

2 Likes

Hi @Leonidas,
I have checked the HTML page that runs automatically with playcanvas, and it already has these meta-tags included:
(index.html)
image
Is there a way to access index.html via Javascript, or more importantly, add some meta tags here?

Hi @ThePastaNebula,

Sure, I think you can do that using Javascript, google around and you will find something.

But I am not sure if you change those metatags using Javascript, the browser will pick up / support those changes.