Режим просмотра застревает при повороте телефона

Question

Только что запустил мобильное веб-приложение, используя jQuery Mobile. Когда я поворачиваю устройство в ландшафтный режим и затем возвращаюсь в портретный режим, представление застревает в ландшафтном режиме. Нужно ли вручную обновлять представление в зависимости от события или ...? В настоящее время я тестирую на iPhone.

/ Rasmus

Answer 1

Если вы еще не пробовали другие теги viewport, попробуйте это:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >

Важная часть, касающаяся вашего вопроса, - width=device-width.

-> ОБНОВЛЕНИЕ <- </p>

Вот пример JavaScript, который касается Mobile Safari, не обновляющего значения ширины / высоты области просмотра при изменении ориентации:

if (navigator.userAgent.match(/iPhone/i)) {
    $(window).bind('orientationchange', function(event) {
        if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
            $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
        } else {
            $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
        }
    }).trigger('orientationchange');
}

Приведенный выше код проверяет navigator.userAgent строка, чтобы увидеть, если устройство является iPhone.Затем он привязывает обработчик события к событию directionalchange, который определяет ориентацию устройства, и обновляет тег окна просмотра, чтобы использовать правильные размеры в зависимости от ориентации.Обратите внимание, как height установлен на device-width, когда устройство находится в горизонтальной ориентации.