Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Etapy-sozdaniya-sajta » Width-protiv-device-width

Width против device-width

Решил продолжить тему адаптивной вёрстки сайта. Сегодня рассмотрим, чем отличается «ширина»(width) и «ширина устройства»(device-width). Многие вебмастера путают эти понятия и разобраться в них действительно проблематично. С этой проблемой столкнулся и я, когда увидел как отображается мой сайт в реальности на смартфоне.
ширина устройства

Дело в том, что на смартфоне сайт выглядел также, как и на компьютере, хотя стили были прописаны для смартфона. Согласитесь неудобно каждый раз увеличивать картинку, чтобы её прочитать? На практике оказалось, что размер экрана устройства не совпадает с размером обзора, который я прописал в CSS, с помощью медиазапросов. Чтобы исправить данную недоработку и сделать так, чтобы мобильное устройство стало нормально отображать странички следует добавить вот такой вот код:

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

Всё! После этого все медиазапросы, которые мы прописали в файле стилей начнут срабатывать. Без этой строчки устройство пытается запихнуть например 1024px в 480px. Можно конечно сразу использовать и такие строчки кода:

@media screen and (min-device-width: 1024px) {
div {width: 1000px;}
}

@media screen and (device-width: 960px) {
div {width: 900px;}
}

@media screen and (device-width: 480px) {
div {width: 460px;}
}

Не знаю как делают другие разработчики, но я пытаюсь использовать широкий диапазон разных размеров экрана, что позволяет в конечном итоге воспринимать предлагаемую информацию на сайте одинаково на любых устройствах. Мне кажется не стоит забывать про ориентацию устройства. То есть продумать, как пользователь будет видеть страничку при повороте экрана своего устройства.



наверх