iPhone Mobile Safari заставляет появляться верхнюю панель после поворота от пейзажа к портрету (избегайте «минимального пользовательского интерфейса»)

Question

Естественно, что когда вы открываете веб-сайт в iPhone Mobile Safari в портретной ориентации и поворачиваете его в альбомную ориентацию, он становится «полноэкранным» (скрывает нижнюю верхнюю панель браузера). Затем вы поворачиваете его обратно в портретное положение, оно сохраняет полноэкранный вид (нижняя верхняя панель браузера все еще не видна). Чтобы проверить, просто откройте Википедию на вашем iPhone (или на симуляторе iPhone) в портретной ориентации, поверните его в альбомную ориентацию (сразу будет полноэкранный режим) и снова верните в портретную ориентацию (сохраняет полноэкранный вид). .

Мне нужно изменить это поведение. Я хочу убедиться, что в портретном режиме верхние-нижние строки состояния всегда видны, но в альбомной ориентации мой веб-сайт работает в полноэкранном режиме. (Поскольку моя HTML-игра не прокручивается, проблема заключается только в поворотах вперед и назад.)

Эта игра работает следующим образом:

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

Откройте эту игру в портретном Safari на iPhone (или на iPhone Simulator), переведите ее в альбомную (в полноэкранном режиме), затем верните ее в портретную, и верхняя панель браузера будет отображаться появляются ???

Как мне добиться того же самого, как эта игра Panda делает это?

То, что я пытался

• Скопируйте тег из Panda, не сработало.
• посмотрите, что делают HTML-классы "ioshack" и "iPhoneX" - не помогло
• Google вокруг, даже проверить китайские форумы и форумы pixiJS (игра Panda является приложением pixiJS), не нашел ничего полезного.

Answer 1

После дополнительных исследований я нашел следующую истину, по крайней мере, на iOS 9-12:

• Safari не поддерживает полноэкранный режим в портретном режиме, если тело не прокручивается, то естьсодержимое соответствует виду по умолчанию, в котором видна верхняя и нижняя панели (в этом случае они будут автоматически отображаться при повороте телефона)
• Safari сохраняет полноэкранный режим в портретном режиме, если вы используете высоту: 100vhна вашем или теге (вместо, например, 100%)

Итак, изменив стиль тела на «высота: 100%» И убедившись, что нет больше div, чем тело было достаточно, чтобы заставить Safari избегатьполноэкранный режим в портретном режиме.