@Ivanushka255

Почему не работает viewport?

Вот мой код:
<head>
	<meta charset="UTF-8">
	<title>document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
		p {
			font-size: 20px;
			max-width: 100%;
		}
</style>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam, perferendis. Accusamus totam pariatur libero dolorem maxime saepe distinctio perferendis vero hic molestiae at debitis, illo aut, commodi, non illum nam. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, sint ullam error, voluptatibus laborum perspiciatis quo tempora explicabo ad, in vero nam consectetur impedit hic, sapiente doloribus iure consequuntur. Magnam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi est cupiditate in architecto consequatur odit inventore quas. Ipsam error, atque, tempora quaerat perferendis vitae alias distinctio neque, similique, omnis qui. Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Temporibus, consequuntur eum reiciendis illo blanditiis. Animi, at. Temporibus, praesentium quidem aperiam hic consequatur quisquam ad natus assumenda ipsa, nobis cupiditate architecto?</p>
</body>


Вот как этот текст отображается:
5f8872f1cb9d4669173939.png

Если я правильно понимаю как должна работать эта строка кода
<meta name="viewport" content="width=device-width, initial-scale=1.0">
, то почему тогда viewport (видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке) не равен ширине устройства и для того, чтобы увидеть весь текст, надо скроллить?
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Пробовал именно на мобильном устройстве? У DevTools есть неприятная вещь, что он обрабатывает viewport плохо. Попробуй перезагрузить страницу, или включить/выключить мобильный вид.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы