Основные разрешения (размеры) экранов для адаптивной верстки

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

Размер экрана, разрешение и область просмотра: что это значит?

Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 1024 × 768).

Устройства с одинаковыми размерами экранов могут иметь разные разрешения. Поэтому разработчики используют окна просмотра при создании страниц, удобных для мобильных устройств. Окна просмотра — это уменьшенные версии, которые позволяют последовательно просматривать сайты на всех устройствах. Окна просмотра часто стандартизированы для меньших размеров разрешения.

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

Нужна помощь в определении того, удобен ли ваш сайт для просмотра на разных мобильных устройствах? Воспользуйтесь нашим сервисом →.

Отзывчивый дизайн

Невозможно разработать стиль и дизайн сайта для каждого устройства. Поэтому для адаптивной вёрстки разработчики часто:

• Группируют стили по типичным размерам экранов для телефонов, планшетов и настольных версий компьютеров. В этом случае на экранах, размеры которых превышают 7 дюймов по диагонали, сайт отображается с разрешением стационарного компьютера.
• Используют контрольные точки. Они определяют ширину дисплея в пикселях. Это значение устройства корректируют в зависимости от размеров экранов.

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

Если вы разработчик и хотите создать дизайн, удобный для работы с мобильными или адаптивными стилями, ниже мы предлагаем фрагменты кода CSS, которые могут пригодиться. Важно отметить, что эти контрольные точки не подходят для всех сайтов и должны использоваться только в качестве ориентировочного руководства для работы.



/* Стили для десктопа - начало */

@media screen and (max-width: 991px) {

/* стили для больших планшетов — начало */

}

@media screen and (max-width: 767px) {

/* стили для средних планшетов — начало */

}

@media screen and (max-width: 479px) {

/* стили для телефонов — начало */

}

Самые популярные разрешения экрана

Зная, что при разработке веб-сайтов важно учитывать возможности разных устройств, мы составили список самых современных из них. В нём отражаются и разрешения экранов и показатели окон просмотра.

Устройства Apple

Устройства Android

Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже

Размеры экранов для адаптивной верстки

by АлексейОпубликовано28. 01.201613.11.2017

С каждым годом трафик с мобильных устройств растет и со временем превысит его. Уже сейчас, одним из требованием в ТЗ на разработку сайта является адаптивный дизайн под разные типы устройств. Поэтому до сборки сайта нужно подумать о представлении контента таким образом, чтобы он был ориентирован и на мобильную аудиторию.

Адаптивные дизайны (responsive designs) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты.

При создании адаптивного дизайна важно с самого начала определиться, на какие устройства и размеры экранов ориентирован разрабатываемый сайт. Мы должны выбрать устройства для адаптивной верстки: компьютеры, ноутбуки, планшеты и смартфоны. Кроме того, в пределах диапазонов ширин экранов для каждого из выбранного класса устройств мы должны определить, как будет работать адаптивная верстка – какие разрешения учитывать, а какие пропустить. Существует довольно большое многообразие возможных форматов экранов для каждого из видов устройств, но это не значит, что вы должны обязательно использовать их все. Достаточно выбрать лишь несколько наиболее распространённых форматов экранов для адаптивной вёрстки.

Вот несколько сниппетов для адаптивной верстки, в котором расписаны наиболее распространенные размеры дисплеев:

1. Смартфоны (Портрет и ландшафтный)

   @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

2. Смартфоны (ландшафтный)

   @media only screen and (min-width : 321px) {}

3. Смартфоны (portrait)

   @media only screen and (max-width : 320px) {}

4. iPads (Портрет и Ландшафтный)

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

5. iPads (Ландшафтный)

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

6. iPads (Портрет)

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

7. Настольные компьютеры и ноутбуки

   @media only screen and (min-width : 1224px) {}

8. Большие экраны

   @media only screen and (min-width : 1824px) {}

9. iPhone 4

   @media only screen and (-webkit-min-device-pixel-ratio : 1. 5),only screen and (min-device-pixel-ratio : 1.5) {}

Для тестирования разрабатываемого сайта можно воспользоваться web-сервисами:

1. http://mattkersley.com
2. http://www.responsinator.com

1. @media only screen – только для экранов монитора;
2. min-width – условие “истина”, когда ширина окна браузера больше установленного значения;
3. max-width – условие “истина”, когда ширина окна браузера наоборот меньше установленного значения;
4. min-device-width – условие “истина”, когда размер экрана устройства больше установленного значения;
5. max-device-width – условие “истина”, когда размер экрана устройства меньше установленного значения;

Posted in CSS, HTMLПомеченные css, адаптивная верстка

медиа-запросов CSS: ширина по сравнению с шириной устройства

ширина против ширины устройства

В СМИ CSS разница между шириной и
device-width может быть немного запутанным, поэтому давайте немного объясним это.
device-width относится к ширине самого устройства, в других
словами, разрешение экрана устройства. Допустим, ваш экран
разрешение 1440 x 900. Это означает, что экран имеет ширину 1440 пикселей, поэтому
имеет ширину устройства из 1440 пикселей. Большинство мобильных телефонов имеют
ширина устройства 480 пикселей или меньше, включая популярный iPhone 4
(с шириной устройства: 320 пикселей), несмотря на то, что технически он имеет разрешение 640 x 960.
Это связано с дисплеем Retina в iPhone 4, который вмещает в себя два пикселя устройства.
каждый пиксель CSS на экране. Это верно и для Ipad 3; это
сообщил
ширина устройства составляет 768 пикселей, как и его предшественники, хотя его фактическая
разрешение экрана 1536х2048 пикселей. В общем ширина более универсальный
когда дело доходит до создания адаптивных веб-страниц, полезно использовать ширины устройства .
когда вы хотите специально настроить таргетинг на мобильные устройства (а не на настольные компьютеры с
маленькое окно браузера, например), так как настольные компьютеры редко имеют экран
разрешения ниже определенного числа, например 320 x 480 пикселей.

Ниже показано разрешение экрана и размеры мультимедийного устройства CSS для некоторых популярных устройств.
там:

Разрешение

CSS Media Dimensions

Устройство	(пкс)	ширина устройства/высота устройства (px)
Айфон	320 х 480	320 x 480, как в книжной, так и в альбомной ориентации
iPhone 4	640 х 960	320 x 480, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 2
iPhone 5, 5s	640 х 1136	320 x 568, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 2
iPhone 6	750 х 1334	375 x 667, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 2
iPhone 6 плюс	1242 x 2208	414 x 736, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 3
iPad 1 и 2	768 х 1024	768 x 1024, как в книжной, так и в альбомной ориентации
iPad 3	1536 х 2048	768 x 1024, как в книжной, так и в альбомной ориентации CSS плотность пикселей 2
Samsung Galaxy S I и II	480 х 800	320 x 533, в портретном режиме Плотность пикселей CSS 1,5
Samsung Galaxy SIII	720 х 1280	360? x 640?, в портретном режиме
HTC Evo 3D	540 х 960	360 x 640, портретный режим Плотность пикселей CSS 1,5
Amazon Kindle Fire	1024 х 600	1024 x 600, ландшафтный режим

Просто
чтобы еще больше усложнить ситуацию, в устройствах iPhone и iPad ширина устройства
всегда соответствует ширине устройства в портретном режиме , независимо от того, находится ли устройство в этом режиме или ландшафтном
вместо. С другими устройствами его ширина устройства изменяется в зависимости от его
ориентация.

* Для
более полный список устройств и разрешений их экранов см.

эта страница.

Давайте теперь посмотрим еще несколько медиа-запросов CSS, которые захватывают
различные устройства и размеры экрана:

/* #### Мобильные телефоны Книжная #### */
@media screen and (max-device-width: 480px) и (ориентация: портретная){
  /* немного CSS здесь */
}

/* #### Мобильные телефоны Альбомная ориентация #### */
@media screen и (max-device-width: 640px) и (ориентация: альбомная){
  /* здесь немного CSS */
}

/* #### Мобильные телефоны Книжная или альбомная ориентация #### */
@media screen and (max-device-width: 640px){
  /* здесь немного CSS */
}

/* #### iPhone 4+ Книжная или Альбомная #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio :
2){
  /* здесь немного CSS */
}

/* #### iPhone 5, портретная или альбомная ориентация #### */
@media (высота устройства: 568 пикселей) и (ширина устройства: 320 пикселей) и (-webkit-min-device-pixel-ratio:
2){
  /* здесь немного CSS */
}

/* #### iPhone 6 и 6 плюс портретная или альбомная ориентация #### */
@media (min-device-height: 667px) и (min-device- ширина: 375 пикселей) и (-webkit-min-device-pixel-ratio:
3){
  /* здесь немного CSS */
}

/* #### Планшеты Книжная или Альбомная #### */
@media screen and (min-device-width: 768px) and (max-device -width: 1024px){
  /* здесь немного CSS */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* здесь немного CSS */
}

Итак, теперь у нас есть довольно хорошее представление об использовании медиазапросов CSS. Однако,
есть еще одна важная часть головоломки, которая нам нужна для того, чтобы
все работает как положено, и это вьюпорт мета
ярлык.

• Введение в мультимедийные запросы CSS

Ширина

• по сравнению с шириной устройства
• Метатег области просмотра — ключ к
  подготовка страницы для оптимизации мобильных устройств
• Сопоставление медиа-запроса CSS в
  JavaScript с использованием window.matchMedia()

Метатег окна просмотра — ключ к
подготовка страницы для оптимизации мобильных устройств

Как пиксели соотносятся с размером экрана в CSS

Если установить ширину div на 450px. Что произойдет с div на меньшем экране, скажем, телефона или планшета??

1

Вкратце: если вы используете зависит от DPI (точек на дюйм) экрана.

Из спецификации CSS:

1 пиксель = 1/96 часть 1 дюйма

и из Mozilla Docs по спецификации CSS 2.1:

Если плотность пикселей устройства вывода сильно отличается от плотности типичного дисплея компьютера, пользовательский агент должен изменить масштаб значений пикселей. Рекомендуется, чтобы единица пикселя относилась к целому количеству пикселей устройства, которое наилучшим образом соответствует эталонному пикселю. Рекомендуется, чтобы опорным пикселем был угол обзора одного пикселя на устройстве с плотностью пикселей 9.6dpi и на расстоянии вытянутой руки от читателя.

Пиксель CSS на самом деле является отдельной единицей измерения и не относится к пикселям, которые вы видите. Если ваш сайт с элементом div размером 450 пикселей представляет собой стандартную HTML-страницу и вы просматриваете ее на телефоне (в книжной ориентации) и на настольном мониторе (скажем, 1920×1080), вы заметите, что на телефоне элемент div занимает больше места на экране, а на на рабочем столе он будет занимать меньше места на экране.

Я думаю, что это видео делает довольно приличную работу по объяснению этого.

Если вы не используете 1px близко соответствует 1px.

Вы можете сами проверить это, открыв эти две страницы на телефоне:

Установлен метатег ширины области просмотра

Метатег ширины области просмотра НЕ установлен

Пиксель равен 1/96 дюйма. Однако дюйм в этом контексте не обязательно соответствует физическому дюйму.

Согласно спецификации CSS, на физическом носителе, таком как печатная бумага, меры должны быть привязаны к физической мере, такой как дюйм или сантиметр, и все остальные меры будут относительными к ним.

Однако на экране показатели могут быть привязаны к пикселю, и тогда фактический размер пикселя должен учитывать среднее расстояние, на котором пользователей держат экран от глаз. Размер пикселя должен соответствовать 1/96 физического дюйма для устройства, которое обычно держат на расстоянии вытянутой руки.

This entry was posted in Популярное