iPhone Mobile Safari force to appear the top bar after rotating from landscape to portrait (avoid "minimal ui")

1
votes

Naturally, when you open a website in iPhone Mobile Safari in portrait and rotate it to landscape, it is going to turn "full-screen" (hide bottom-top browser bar). Then you rotate it back to portrait, it keeps the full-screen view (the bottom-top browser bar still not visible). To test, simple open Wikipedia in your iPhone (or on an iPhone Simulator) in portrait, turn it to landscape (going to be fullscreen right away), and turn it back to portrait (keeps its fullscreen view).

I need to change this behavior. I want to make sure, in portrait, the top-bottom status bars are always visible, but in landscape, my website is full-screen. (Because my HTML game is not scrollable, only this back and forth rotation is the issue.)

This game works on this way:

https://lobby.sgplayfun.com/touch/spadenew/20190115P/games/triplepanda/index.jsp?game=S-TP02&language=en_US

Open this game in portrait Safari on an iPhone (or on an iPhone Simulator), turn it to landscape (going to be full-screen) then turn it back to portrait, and the top browser bar is going to appear ???

How can I achieve the same, how does this Panda game do this?

Things I tried

  • Copy the < meta viewport > tag from Panda, did not work.
  • look for what does the "ioshack" and "iPhoneX" HTML class do - not helped
  • google all around, even check Chinese forums and pixiJS forums (that Panda game is a pixiJS app), did not found any useful.
1
javascripthtmlcssiphonesafari

1 Answers

2
votes

After more investigation, I found the following truth at least on iOS 9-12:

  • Safari does not keep the full-screen view in portrait mode if the body is not scrollable, meaning the content fits the default view where the top and bottom bar is visible (they will automatically appear in this case when you rotates your phone)
  • Safari does keep the full-screen view in portrait mode if you use height:100vh on your or tag (instead of e.g 100%)

So, changing the body style to "height: 100%" AND making sure there is no div longer than the body was enough to force Safari avoiding full-screen mode in portrait.