Почему Chrome сокращает изображение в адаптивном режиме? - PullRequest
Новая
       10

Почему Chrome сокращает изображение в адаптивном режиме?

0 голосов
/ 26 ноября 2018

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

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

Однако в Chrome Dev Tools при первом просмотре страницы в альбомной ориентациии затем повернутый в портретный режим размер страницы становится очень маленьким, даже если ширина html-страницы равна ширине устройства после поворота, то есть 400 пикселей.Это показано в следующем видео: Страница сокращается при повороте устройства из альбомного в портретный режим в инструментах Chrome

Снимок экрана сокращенной страницы показан ниже. Ширина видимого тела составляет 400 пикселейно он не распространяется на правый край снимка экрана.

Вопрос : Почему это произошло бы, даже если был добавлен правильный тег окна просмотра?Возможно, это ошибка / проблема с эмулятором инструментов Chrome.

ОБНОВЛЕНИЕ 1

Я также обнаружил, что эта проблема связана не только с эмулятором инструментов Chrome Dev, но и в реальной жизни.мобильные устройства, такие как смартфоны Android или Iphone.Я проверил это на смартфоне Android (хром) и iphone 6plus (сафари и хром)

Shrunk view in Chrome Dev tools

1 Ответ

0 голосов
/ 26 ноября 2018

Мне удалось обойти эту проблему, подписавшись на событие JavaScript orientationchange, используя фрагмент кода, приведенный ниже.

Я использовал jquery в приведенном ниже коде, чтобы установить overflow-x для html и bodyскрыт при повороте в портретный режим, поскольку это сжатие происходило только при повороте в портретный режим. 

window.onorientationchange = function() { 

       let htmlElement =  $("html");
       let bodyElement = $("body");

       if($(window).innerWidth() < $(window).innerHeight()) {//landscape to portrait
           htmlElement.css("overflow-x","hidden");
           bodyElement.css("overflow-x", "hidden");
        } else {//portrait to landscape
           htmlElement.css("overflow","auto");
           bodyElement.css("overflow", "auto");
           //below 2 lines makes the UI not shrink in portrait mode 
           htmlElement.css("overflow-x","auto");
           bodyElement.css("overflow-x", "auto");
        }

}
...