Почему при 100% ширине блок не на весь экран?

Question

[pegas]

Я заметил одну странную особенность Даже страницу для демонстрации сделал. Если открыть панель инструменты разработчика (F12) и вызвать показ мобильных устройств (Ctrl + Shift + M) то: чёрный блок которому задано width:100% не растягивается во всю ширину. Зато браузер вместил красный блок вместо того чтобы задать горизонтальную полосу прокрутки. Почему так происходит?

Answer 1

[iBird Rose]

потому что после 1200px идет масштабирование, а не адаптирование. ты блоку задал фиксированную ширину в 1200px - он выходит за грани документа. в инспекторе посмотри где у тебя body заканчивается.
в двух словах - блок просто вышел за грани сайта. потому что ему некуда деваться.

p.s. если хочешь чтобы он дальше масштабировался нормально задай для body
body {min-width: 1200px;}

Comments

[pegas]

Но при просмотре на компьютере появляется горизонтальная прокрутка, а в мобильном варианте нет.

[iBird Rose]

Артём: ну мета теги то укажи для адаптации. к примеру так

<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

[pegas]

iBird Rose: Т.е. это задумка разработчиков чтобы на мобильных экранах показывать все элементы на экране?

[iBird Rose]

Артём: я пока не понимаю о чем ты. ты создал блок шириной 1200px. понятное дело он не влезит на телефоне, у которого ширина 320px. как ты хочешь чтобы этот блок показывался?

[pegas]

iBird Rose: Если на компе уменьшить экран то появляется горизонтальная прокрутка, а на планшете нет.

[iBird Rose]

Артём: добавь метатег

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

и будет тебе прокрутка и там и там

[pegas]

iBird Rose: Вот об этом я и говорю, то что по умолчанию на компах появляется прокрутка, а на мобильных устройствах нет.

[iBird Rose]

Артём: это нормально. ты сам должен настроить как тебе нужно чтобы сайт отображался. прочитай про viewport https://itchief.ru/lessons/html-and-css/meta-viewp...