Мобильные браузеры принудительно загружают содержимое?

#html #css #mobile #responsive

#HTML #css #Мобильный #отзывчивый

Вопрос:

Я разрабатываю адаптивную веб-страницу с размером поля: border-box. В представлении мобильных веб-инспекторов настольных браузеров все элементы в штучной упаковке / дополнениях идеально подходят.

Но когда я переключаюсь на реальное мобильное устройство (Android с Chrome и встроенным браузером), размер поля кажется принудительным для содержимого, и я получаю ужасную горизонтальную прокрутку, примерно такого же размера поля и отступы добавились бы, если бы было включено содержимое.

Я попробовал несколько разных css, таких как

 * {box-sizing: border-box} 
html {box-sizing: border-box} * {box-sizing: inherit}
every, single, boxed, element {box-sizing: border-box}

Ничего не работает.

Этот код every, single, boxed, element {width: 90%} предназначен для удаления горизонтальной прокрутки, поэтому скрытый элемент не шире ширины экрана.

Почему мобильные браузеры принудительно загружают содержимое в поле? Есть какие-либо подсказки и исправленные исправления?

1. Пожалуйста, разместите свой HTML, чтобы мы могли помочь

2. diagnos.ru/diseases/cutis/acne

3. Ваш веб-сайт отлично работает для меня. Используя iPhone SE. пробовал это в Chrome и Safari. Не вижу никаких проблем.

4. Спасибо! По крайней мере, мы видим, что это проблема Android.

Ответ №1:

Вы установили поле: 0 для тела? Если вы используете оболочку вокруг своего html с автоматическим горизонтальным полем, я думаю, вы избавитесь от горизонтальной полосы прокрутки, а изменение размера / масштабирование браузера будет более плавным.

 <body>
  <div class="page">
    <!-- your html here -->
  </div>
</body>


html, body {
  margin: 0;
}
.page {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
*, *::before, *::after {
  box-sizing: border-box;
}

1. Да, конечно, я пробовал это. Возможно, есть скрипт 3d party, который заставляет css меняться.

2. Хорошо, возможно, это может привести к изменению размера поля. При использовании минимального html / css он будет работать нормально.

Ответ №2:

Переключение на блоки, связанные с экраном, сработало отлично! Мобильные браузеры никогда не позволяют себе игнорировать такие типы единиц измерения, поэтому, если мы переключаемся с процентов на viewWidth, горизонтальная прокрутка никогда не появляется.

Решение:

 @media screen and (max-width: 600px) {
  body {max-width: 100vw}
}