Верстка под Iphone. Как реализовать показ страницы целиком в горизонтальном режиме с меню?

Question

[Юлия]

есть требование заказчика что страница должна помещаться целиком в горизонтальной ориентации у 5 и 6 айфона,
проблема в навигационном меню сафари, при его появлении размер окна не меняется а контент частично скрывается и уезжает вниз.
все способы которые нашла в инете работают только в полноэкранном режиме.
как определить размер видимой области у айфона с меню?
какое событие срабатывает при появлении и скрытии меню?

Comments

[Юлия]

проблема в том что innerHeight, и documentElement.ClientHeight выдают одно и то же значение

Answer 1

[Yaroslav Rostanets]

1. Используйте отладчик в хроме. Там Есть режим горизонтальной ориентации. Вы можете использовать так же:
$(window).width()
что б определить ширину окна.
2. При появлении/скрытии меню срабатывает скорее всего "onresize".
Возможно вам помогут медиазапросы

@media all and (orientation: landscape) {
  /* Target device in landscape mode */
}

@media all and (orientation: portrait) {
  /* Target device in portrait mode */
}

или же событие изменения ориентации экрана
https://developer.mozilla.org/en-US/docs/Web/Even...

Answer 2

[Виталий]

quirktools.com/screenfly введете адрес страницы и виберите тип устройства