Контейнер DIV на iPhone не является 100% -ной шириной

Question

Посмотрите на http://benoitfal.com/tess.html на iPhone и обратите внимание, как мой контейнер div ошибочен ... Это должно быть 100% -ная ширина браузера.

Answer 1

Скажите, что ваш iPhone похож на мой 375px в ширину - это 100%. Ваши изображения более широкие, чем 375 пикселей, поэтому iPhone уменьшил масштаб, чтобы показать всю страницу. Контейнер по-прежнему остается на 100% (в моем случае 375px), поэтому ваша коробка занимает примерно половину экрана. Если вы сделаете свое изображение шириной 100% вместо фактического размера, они будут уменьшаться, чтобы соответствовать окну просмотра.

Оригинальное решение для рабочего стола: Ваша коробка на 100% ширины браузера, но вы добавили от 6px с каждой стороны. К сожалению, это добавляется к ширине, поэтому она переполнена. Установите box-sizing: border-box на div, и он исправит это.

Подробнее о box-sizing здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Потому что это не полностью принял немного CSS все же, вы должны использовать префиксы браузеров, согласно, например, в ссылке. Если вы используете Compass для вашего SASS, вы можете использовать @include box-sizing(border-box).