Различный рендеринг в мобильном представлении и ручное изменение размера браузера - PullRequest
Новая
       32

Различный рендеринг в мобильном представлении и ручное изменение размера браузера

0 голосов
/ 11 ноября 2019

Я столкнулся с утомленным поведением и не могу найти причину такого поведения. Мои веб-сайты имеют два разных рендеринга, когда я вручную изменяю размер Google Chrome и проверяю веб-сайт в имитаторе устройства (с помощью инструментов разработчика).

enter image description here

Краткое описание: 

<html>
    <body>
        <div>
          //Entire the codes here with no overflowed element
        </div>
    </body>
</html>

У меня нет стиля для ширины тегов HTML и BODY. Прямой потомок тела снова является DIV с без стилевого оформления по ширине (поэтому он должен покрывать 100%). Когда я изменяю размер окна вручную, DIV покрывает 100% ширины области просмотра, но когда я изменяю размер окна в имитаторе устройства (инструменты разработчика), дочерний DIV сжимается быстрее, чем область просмотра и пробелы появляются в правой части окна.

В реальном мобильном устройстве, когда я проверяю веб-сайт, значок верхнего меню выходит за пределы ширины экрана, и я вижу половину этого значка, поэтому кажется, что рендеринг в симуляторе устройства - это настоящая логикачто происходит, это реальное устройство. Если вы уменьшаете масштаб веб-страницы на реальном устройстве, значок «Меню» возвращается на экран, однако я установил следующее, и я ожидаю, что страница откроется во всю ширину по умолчанию, но кажется, что она увеличена, что я могу вывести после страницыload): 

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

Дополнительные проверки:

  • При проверке элементов не вычисляются отступы и поля в теле и html.
  • Я удалил AOSбиблиотека с веб-страницы, чтобы убедиться, что сторонняя библиотека не создает поля и отступы, но не вносит изменений.
  • Я проверил overflow-x:0 для тела, чтобы убедиться, что нет элемента переполнения, но нет изменений.

1 Ответ

2 голосов
/ 11 ноября 2019

У вас есть div, позиция которого не соответствует ширине (области просмотра) веб-сайта: 

<div style="position:absolute;left:calc(10% + 350px);top:120px;color:#f57f20;font-size:20pt;">
  <font style="vertical-align: inherit;">
    <font style="vertical-align: inherit;">
      with Plan
    </font>
  </font>
</div>

Обратите внимание на calc(10% + 350px).

enter image description here

Кстати, если вы хотите вырезать лишнее, вы можете использовать тег html (а не тег body) следующим образом: 

html {
  overflow-x: hidden;
}
...