Can I replace the black bars of letterbox scale by white bars on iPhone X?

Hi everyone,

Everything is in the title. Is there any way to replace the black bars of letterbox scale by anything else? I'd like to avoid using another "fullscreen in browser" method if possible. So no scale inner, outer or such stuff.

Thanks!

Yes.

Change the background settings in the index html.

Thanks a lot !

Safari's pretty buggy. Random google suggests:

 
 _::-webkit-full-page-media, _:future, :root .panel { 
 background-color:#000 
 } 
 

Thanks for your help, newt

I tried it (by replacing #000 by #fff) and the only difference I saw was that the whole game was displaced maybe 20 pixels lower and a white bar has appeared on top of the image.

(image from Xcode's simulator, as you can see there's an undesired white bar on top of the image, but the borders are still black)

But that's not at all what I wanted to do. (having white bars of letterbox scale instead of black ones).

Maybe I put the code at the wrong place in the index.html file? I placed it below html, body {

I know nothing about HTML, so maybe I just didn't do what you intended?

Just as a side note, your first solution worked really well for Android,but sadly I only need it for iOS. :(

Further help would be greatly appreciated.

Thanks for the reply. I took a look at the topic, but if I understood it correctly it implies using letterbox integer scale, and I definitely need letterbox scale.

I just need those black bars to be white on iOS (on Android I managed to do it already, but on iOS for some reason it doesn't work so far).

My suggestion: Change only Background to background:#fff and after that you insert a new line:

background-color: white;

Thanks for the suggestion, Asmodean !

Sadly, the result in the Xcode Simulator is exactly the same... Actually, even the additional white margin at the top of the image is still there, while I removed the previous code. So I may definitely be doing something wrong. Or there is something I don't understand, such as cache from previous import of the same folder in Xcode, but it would be definitely weird.

I'll rebuild the project completely and start from a fresh index.html file just to be sure.

It could be the cache. Have you tried it in safari to look if it's work at all?

It works for me in FireFox and Chrome, but I have to clear the cache before I try any changes.

Actually I didn't try in Safari. It's a bit complicated because I do not own a Mac, so I'm doing everything via my publisher's Mac via AnyDesk which allows me to control their Mac from a remote location with horrible response time.

I just clicked the index.html file in finder (on the Mac), and all I get is a white screen, but isn't it the expected behavior given the file has been exported with Cordova? I get the same type of behavior in Chrome from my PC.

Or maybe did you mean something else by "trying in Safari"?

Thanks!

Rable What I mean is that you export your project to html and look if it's work on safari. So you can see if it's a problem with Webkit or if it's only a problem with Cordova and/or the App itself.

I would try now the suggestion from purplemonkey. I think that's a really clever idea. If that doesn't work either you can try to change the background color in config.xml in cordova.

<preference name="BackgroundColor" value="0xffffffff"/>

Thanks a lot, guys! :)

I'll try all of this and hopefully end up with a working solution. I'll keep you updated in either cases. ;)