Примечание: этот вопрос является дубликатом . Я опубликую суть моего ответа здесь.
2015 обновление
Все остальные ответы, к сожалению, неверны, устарели или ошибочны. Вот что работает:
window.addEventListener('orientationchange', function () {
var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
document.body.style.display='none';
setTimeout(function () {
document.body.style.display = originalBodyStyle;
}, 10);
});
Код прослушивает событие directionalchange и вызывает повторный поток элемента body
, скрывая его и показывая его через 10 миллисекунд. Он не зависит от тегов <meta>
или медиазапросов.
Вы сказали,
Когда я открываю свою тестовую страницу на iPad в альбомной или книжной ориентации, она выглядит нормально. Однако при переключении из альбомного в портретный режим страница смещается влево
Это ключ. Вам просто нужно перекрасить body
.
Ответы, предлагающие добавить <meta name="viewport" content="width=device-width, initial-scale=1.0">
или их варианты, начиная с Safari 7, больше не вызывают сомнений. Вот демоверсия . Чтобы убедиться, что вы видите, как это не работает, начните с iPad в альбомном режиме, загрузите страницу, а затем поверните ее. Обратите внимание, что страница не увеличивается до полной высоты, несмотря на то, что полностью использует flexbox.
Сравните это с этой страницей , где мы используем технику скрытия / показа тела в производстве.