Случай 1: Без initial-scale=1.0
Вот код:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
Я открываю эту страницу с помощью Chrome в настольном браузере.Затем я щелкаю правой кнопкой мыши на странице и выбираю Inspect.Затем я щелкаю значок мобильного телефона в инспекторе и выбираю Galaxy S5 из выпадающего списка.Я вижу это:
Тот же результат можно воспроизвести с помощью Chrome на реальном мобильном телефоне.Элемент <div> не такой широкий, как страница.
Случай 2: С initial-scale=1.0
Вот код:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
Вот выводсейчас.Страница выглядит нормально, когда она загружается, но при прокрутке вправо мы видим, что <div> по-прежнему не такой ширины, как вся ширина страницы.
Вывод в обоих случаях остается одинаковым, даже если я добавлю width: 50% к .header в CSS.
Вопрос
Почему возникает эта проблема?Как я могу исправить это так, чтобы элемент <div> действительно был такой же ширины, как страница, и все длинное слово было видно справа (это нормально, если пользователь должен прокрутить вправо, чтобы увидеть длинное слово)?