Контент шире экрана

При проверке удобства просмотра сайта на мобильных устройствах часто возникает ошибка: Контент шире экрана! Из-за чего это происходит и как это исправить?

Очевидно, что ошибка связанна с тем, что на странице есть элемент, который выходит за область просмотра viewport.

Например, в инструменте от google-mobile-friendly по умолчанию используется ширина в 320 пикселей.

Рекомендация №1: использовать «резиновые» элементы

Сделать это можно, указав css свойство width:100% и/или max-width:100%

Это наиболее простое и очевидное решение, например:

.content img {max-width:100%}

Примечание :использование значения auto не даёт результата, т.к. оно задаёт автоматическое определение размеров исходного элемента и никак не влияет на его адаптацию.

Рекомендация №2: используйте обёртку для элементов с margin и padding

Следующий нюанс более сложный и менее очевидный. Он связан с особенностями интерпретации CSS-свойств margin и padding в браузерах. По сути, их значения добавляются к  исходному размеру элемента.

Например, у нас есть элемент content-outer :

<body>
<div class="content-outer">
  <!-- content -->
</div>
</body>

Для него задано:

.content-outer {width:100%;padding:10}

В таком случае мы получим ширину: 100% + 10px + 10px (отступы в 10px слева и справа).

Одним из вариантов решения проблемы является использование CSS-свойства box-sizing со значением border-box , которое заставляет браузер учитывать ограничение, заданное родительским элементом. В нашем случае родительским элементом является тег body .

.content-outer {width:100%;padding:10;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box }

Однако такое решение нельзя назвать кросбраузерным. Поэтому обычно используетсявнешняя обёртка, которая будет задавать размер элемента, а отступы указываются  для внутреннего элемента.

Например:

<body>
<div class="content-outer">
<div class="content-inner">
<!-- content -->
</div>
</div>
</body>

В данном случае CSS-свойства распределяются так:

.content-outer {width:100%}
.content-inner {padding:10}

Примечание: рекомендую обнулять отступы у тега body {margin:0;padding:0}


Поделись с друзьями

Поделиться
Плюсануть
Поделиться

Не пропускайте новые материалы, получайте анонсы прямо на e-mail!

Добавить комментарий

Защитный код
Обновить

Комментарии  

Ирина
0 # Ирина 08.07.2015 01:11
А как быть с таблицами? С ними как быть? ;-) :sad: :sad:
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Head
0 # Head 24.12.2016 13:28
Переделывать на div, или делать размеры таблицы в %
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору