Расширение экранов для верстки

Под какие разрешения рисовать адаптивный дизайн?

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

1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

В принципе, этого достаточно, чтобы верстальщик справился.

Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.

В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.

Если немного подумать логически, то получится что расклад примерно такой:
1. Мобилы. На примере Iphone 4 (другие мобилы, кроме лопатофонов имеют схожие размеры). Если держать телефон в руке вертикально, то ширина экрана 320 пикселей, если горизонтально то 480.
2. Далее планшеты. На примере iPad (другие планшеты соответственно похожи по разрешениям). Если держишь вертикально, то 768, если горизонтально то 1024.
3. Далее десктоп. Тут самое популярное на сегодня 1200+, рисовать варианты еще шире, обычно не имеет смысла, сайт просто центрируется на более высоких разрешениях. К тому же, большинство пользователей огромных экранов обычно не открывают браузеры на весь экран.

В общем у вас должно получится примерно 5 разрешений в итоге (+ каждое из этих разрешений должно обладать некоторой гибкостью (+/- 30 пикселей), чтобы можно было учесть все разнообразие адройдовских экранов.

Источник

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

Для грамотной разработки дизайна макета необходимо иметь четкое представление о фактических разрешениях устройства во Viewport т.к. они отличаются от заявленных производителем разрешений экранов смартфонов.

Мы подготовили для Вас таблицу с разрешениями экранов и фактическим разрешением устройства во Вьюпорте (viewport) — это видимая часть окна браузера (мобильного или десктопного).

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

Основные разрешения экрана во вьюпорте браузера для устройств Android следующие:

Устройство	Разрешение дисплея	Viewport
Samsung Galaxy Note 9	1440 x 2960	360 x 740
Samsung Galaxy Note 5	2560 ×1440	480 x 853
Samsung Galaxy S8	1440 x 2960	360 x 740
Samsung Galaxy S9+	2960×1440	320 x 658
Samsung Galaxy S III	1280×720	360 x 640
Samsung Galaxy A51 / 71	2600×1440	412 x 914
Google Pixel 2 XL	1440 x 2560	411 x 823
Google Pixel 2	1080 x 1920	411 x 731

Обобщая данные таблицы можно сделать вывод:

• Минимальное разрешение для портретной ориентации мобильных устройств на базе Adndroid — 320 px
• Минимальное разрешения для альбомной ориентации мобильных устройств на базе Adndroid — 640 px

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

Основные разрешения экрана во вьюпорте браузера для устройств iOS следующие:

Устройство	Разрешение дисплея	Viewport
iPhone 6/7/8/	1440 x 2960	375 x 667
iPhone 6/7/8/ Plus	2560 ×1440	414 x 736
iPhone SE	1440 x 2960	375 x 667
iPhone X	2436×1125	375 x 812
iPhone XR	1792×828	414 x 896
iPhone 12 Pro	2340×1080	390 x 844

Обобщая данные таблицы можно сделать вывод:

• Минимальное разрешение для портретной ориентации мобильных устройств на базе Adndroid — 375 px
• Минимальное разрешения для альбомной ориентации мобильных устройств на базе Adndroid — 667 px

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

Источник

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

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

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

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

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

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

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

@media only screen and (min-width : 321px) <>

@media only screen and (max-width : 320px) <>

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

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

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

@media only screen and (min-width : 1224px) <>

@media only screen and (min-width : 1824px) <>

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) <>

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

Пояснение

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

Похожие записи

Источник