Веб-страница не масштабируется до ширины области просмотра - PullRequest
Новая
       15

Веб-страница не масштабируется до ширины области просмотра

0 голосов
/ 23 апреля 2019

Я пытаюсь преобразовать старую веб-страницу в адаптивный веб-дизайн.

Минимальная ширина 480 пикселей, версия для ПК будет добавлена ​​позже с точками останова.

Код пока: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{width:480px;margin:auto}

#wrapper{width:480px}
#header{width:480px;height:100px;text-align:center;background:black;color:white}
#content{width:480px;background:#cfcfcf;height:1000px}
</style>

</head>
<body>

<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>

</body></html>

Я ожидал, что веб-страница уменьшится до ширины моего мобильного устройства (320 пикселей), но вместо этого она «переполнится» (см. Скриншот, «HEADER» должен быть отцентрирован):

enter image description here

Я думал, что установка метаданных окна просмотра решит такие проблемы?!

Конечно, я мог бы нажать на экран, чтобы масштабировать / подогнать к веб-странице, чтобы реальноширина моего устройства, но она должна делать это по умолчанию.

Что я сделал не так?

Спасибо!

1 Ответ

0 голосов
/ 23 апреля 2019

From: https://www.w3schools.com/css/css_rwd_viewport.asp

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Это означает, что устройство будет определять ширину, обычно от 320 до 360 пикселей на большинстве мобильных устройств.Несмотря на то, что опубликованные спецификации на многих телефонах имеют ширину 1080px или больше, они масштабируют пиксели устройства, чтобы не предлагать настольные версии.Ваш пример помещает контент шириной 480px на ваше устройство шириной 320px, поэтому скажите вашему устройству ширину 480px с этим: 

<meta name="viewport" content="width=480, initial-scale=1.0">

Я также поддерживаю использование width: 100%; min-width: 480px; instead of width: 480px;, предлагаемого arieljuod в комментариях.Он сказал max-width, но я думаю, что более уместно, чтобы мы использовали min-width, так как вы не хотите, чтобы ваш контент был меньше 480px.Наконец, проверьте поля и т. Д. И размер ящика.Это будет иметь большое влияние на адаптивные макеты сетки.Посмотрите нормализацию CSS для получения дополнительной информации: https://css -tricks.com / reboot-resets-обоснование /

...