#javascript #html #css #iphone #safari
#javascript #HTML #css #iPhone #safari
Вопрос:
Естественно, когда вы открываете веб-сайт в iPhone Mobile Safari в портретной ориентации и поворачиваете его в альбомную, он становится «полноэкранным» (скрывается нижняя панель браузера). Затем вы поворачиваете его обратно в портретную ориентацию, он сохраняет полноэкранный режим (нижняя панель браузера по-прежнему не видна). Для тестирования просто откройте Википедию на вашем iPhone (или на симуляторе iPhone) в портретной ориентации, переведите ее в альбомную ориентацию (сразу будет полноэкранный режим) и снова переведите в портретную ориентацию (сохранится полноэкранный режим).
Мне нужно изменить это поведение. Я хочу убедиться, что в портретной ориентации всегда видны верхние и нижние строки состояния, но в альбомной ориентации мой веб-сайт является полноэкранным. (Поскольку моя HTML-игра не прокручивается, проблема заключается только в этом повороте вперед-назад.)
Эта игра работает следующим образом:
Откройте эту игру в портретной ориентации Safari на iPhone (или на симуляторе iPhone), переведите ее в альбомную ориентацию (будет полноэкранный режим), затем переведите ее обратно в портретную ориентацию, и появится верхняя панель браузера???
Как я могу добиться того же, как это делает эта игра Panda?
Что я пробовал
- Скопировать тег <meta viewport> из Panda, не сработало.
- посмотрите, что делают HTML-классы «ioshack» и «iPhoneX» — не помогло
- погуглите все вокруг, даже проверьте китайские форумы и форумы pixiJS (эта игра Panda является приложением pixiJS), не нашли ничего полезного.
Ответ №1:
После дополнительного исследования я обнаружил следующую истину, по крайней мере, на iOS 9-12:
- Safari не поддерживает полноэкранный режим в портретном режиме, если основной текст не прокручивается, то есть содержимое соответствует виду по умолчанию, где видны верхняя и нижняя панели (в этом случае они автоматически появятся при повороте телефона)
- Safari сохраняет полноэкранный режим в портретном режиме, если вы используете height: 100vh в своем теге or (вместо, например, 100%)
Итак, изменения стиля основного текста на «высота: 100%» И проверки того, что ни один div не длиннее основного текста, было достаточно, чтобы заставить Safari избегать полноэкранного режима в портретном режиме.