смещение страницы влево при повороте iPad из пейзажа в портрет

Question

Я использую медиазапросы CSS для создания веб-сайта с адаптивным дизайном.Когда я открываю свою тестовую страницу на iPad в альбомной или книжной ориентации, она выглядит нормально.

Однако при переходе из альбомного в портретный режим страница смещается влево.Я могу сказать, что правильный CSS загружается, потому что другие вещи на странице меняются.Я также могу перетащить страницу вправо, и она будет выглядеть точно так же, как если бы я сначала открывал страницу в портретной ориентации.

У меня установлено окно просмотра: meta id = "view" name = "viewport"content = "width = device-width, initial-scale = 1.0, минимальный масштаб = 1.0"

Я добавил JavaScript, чтобы исправить ошибку масштабирования области просмотра iOS, которая раньше приводила к увеличению масштаба страницы при переключении спортрет в пейзаж.(Я использовал решение, описанное здесь: https://gist.github.com/901295)

У меня проблемы с поиском имени ошибки, с которой я сталкиваюсь при переключении с альбомной на портретную.Кто-нибудь еще видел это или знает как исправить?

Answer 1

Владелец проблемы говорит, что она «также может перетащить страницу вправо, и она выглядит точно так же, как если бы я открыла страницу в портретной ориентации».
Это заставляет меня думать, что по какой-то неизвестной причине (ошибка?) Страница прокручивается влево при изменении ориентации в портретный режим (иначе вы не сможете перетащить ее назад).

У меня была похожая проблема, и я решил ее с помощью следующего обходного решения JavaScript:

// ...
// Optionally add a conditional here to check whether we are in Mobile Safari.
// ...
window.addEventListener('orientationchange', function() {
    if (window.orientation == 0 || window.orientation == 180) {
        // Reset scroll position if in portrait mode.
        window.scrollTo(0, 0);
    }
}, false);

Может быть, это будет работать и для других.

Answer 2

Мне удалось разобрать мою похожую проблему - возможно, это будет работать для вас?

Вам нужно будет решить, является ли это конкретным div или другим элементом, который вызывает его, удаляя / восстанавливая различные биты иповторное тестирование страницы.Как только вы это поработаете, попробуйте добавить свойство overflow: hidden к этому элементу в вашем CSS - я использовал overflow-x: hidden, поскольку моя проблема заключалась в горизонтальной прокрутке, но вам, возможно, придется изменить его.

Надеюсь, что этопользуйся ... удачи!

Answer 3

Примечание: этот вопрос является дубликатом . Я опубликую суть моего ответа здесь.

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.

Сравните это с этой страницей , где мы используем технику скрытия / показа тела в производстве.

Answer 4

Решение для этого предложено @ellawson

Проблема вызвана тем, что браузер неправильно поворачивает какой-либо элемент при повороте устройства. Найдите этот элемент и примените переполнение: скрытый; или overflow-x: hidden; как он говорит.

Answer 5

Jereon, ваш JavaScript работал на меня. Мой видовой экран:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,          minimum-scale=1, user-scalable=no" />

Я использую адаптивную тему Drupal Corporate Clean. У меня не было этой проблемы при использовании адаптивной темы Omega.

Answer 6

Я столкнулся с этой проблемой с iPad и применил html { overflow-x:hidden; }.Это, кажется, решило проблему.

Answer 7

попробуйте добавить следующий параметр в свойства вашего контента: maximum-scale=1

или попробуйте это: user-scalable=no

вот документация ios