Адаптация сайта под разные разрешения экрана: Пример оптимизации сайта под разные экраны css мета теги

04.02.2019 alexxlab

Содержание

Пример оптимизации сайта под разные экраны css мета теги

Пример оптимизации сайта под разные экраны css мета теги Сейчас в нашу жизнь вошло столько устройств, которые позволяют свободно бороздить интернет, что уже не отвечают веениям времени еще недавно преобладающие методы верстки сайтов. Так-как сейчас все больше как маленьких экранов мобильных смартфонов, так и больших экранов десктопов. Я как-то об этом не задумывался и как обычно делал свои сайты под экраны 1024px. Но посмотрев разрешение экранов посещающих мои сайты в яндекс метрике, был удевлен что 1024px уже не актуален и разнообразие разрешений просто огромное. А трафик с маленьких экранов мобильных устройств состовляет почти 20%. Вот скриншот из яндекс метрики одного из моих сайтов, о котором пойдет речь далее.

Разрешения экранов

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

Так-же и гугл оповестил что «ваш сайт не оптимизирован для мобильных устройств». Ниже пример как сайт выглядил до оптимизации на разных разрешениях от мобильников 240*320px, до 1920*1200px.

Скриншот сайта на разных экранах

Скрин сайта на разрешении дисплеев 320px 800px 1280px 1920px Приступив к оптимизации я первым делом добавил мета тег в body сайта. Сервис гугл для проверки оптимизации сказал что «сайт оптимизирован». Но на самом деле это не так. Данный тег заставляет сайт отображаться пиксель в пиксель, то-есть в зависимости от фактического разрешения экрана, определяет область просмотра. Так например на 320*480px будет отображаться только кусочек сайта, а на больших экранах пустые области.

Для отображения сайта пиксель в пиксель

Ниже код, который заставляет отображать сайт пиксель в пиксель на всех устройствах. И если у маленького экрана разрешение к примеру 6дюймов и 1280*800, то сайт будет малюсенький. А если экран 320*480px, то на экране отобразится кусочек сайта этих размеров.

В данном примере значение 1:1, то-есть рано 1.0. Можно ставить свои значения и увеличивать или уменьшать сайт. К примеру на андроид и apple область просмотра сайтов 960-1024px, это значит что сайты с такой шириной будут отображаться на весь экран и без прокрутки, и это не зависит от фактического разрешения экрана, сайт просто масштабируется под размер экрана, Но если добавить этот тег То сайт начнет отображаться в соответствии с аппаратными пикселями, и если разрешение маленькое, то сайт будет слишком крупным и появится прокрутка, а если разрешение большое, то сайт будет маленьким. По-этому один этот viewport ничего не решает, он просто отображает сайт в соответствии с аппаратными пикселями, и отменяет настройки браузеров, что не правильно так-как у браузеров могут буть свои настройки.

Верстка сайта под разные экраны

Чтобы адаптировать сайт я добавил в boby сайта вот этот список мета тегов. viewport — заставляет сайт отображаться в соответствии с пикселями устройства.

screen and — позволяет назначать CSS стили в зависимости от разрешения экрана. Так например запись Указывает что для экранов с разрешением меньше 640px нужно применить стиль из файла style.css Так-же можно указывать стили в одном файле или распределить по разным css файлам. В css файле стиль для экранов как в данном примере max-width:640px делается так /*для мобильных устройств*/ @media screen and (max-width: 640px) { aside {width:98%;} article {width:98%;} #container {font-size:120%;} #razdeli_opisanie {width:95%;} } @media screen and (max-width: 1024px) { body {font-size:85%;} } @media screen and (min-width: 1280px) { body {font-size: 100%;} . Стили css назначаются с помощью @media screen and (min-width: ХХХpx) @media screen and (max-width: 640px) { ваши стили } Так-же можно указать стили для конкретных экранов, например (width: 480px), но сейчас там много разрешений что смысла нет писать большой css фаил чтобы для каждого конкретного экрана написать свои правила отображения.

Я просто сделал резиновую верстку сайта в основных стилях. И если например разрешение экрана меньше (max-width: 640px), то все блоки у меня растягиваются по ширине экрана. А если экран от 640-1024px (max-width: 1024px), то я меняю только шрифт body {font-size: 85%;}, так-как по умолчанию он в браузерах 16px, а я его делаю 14px. Если разрешение (min-width: 1280px), то-есть 1280px и более, то я просто увеличил шрифт до 100%, а сайт в основной верстке расстягивается по ширине экрана.

То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.

Скриншоты сайта е ветерок ру

Скриншоты в размерах 320px 640px 800px 1024px 1280px 1920px Надеюсь что вам стало понятно как сделать. Думаю как сделать основную резиновую верстку вы и так знаете. Я к примеру все размеры указал в процентах (%) вместо пикселей (px). И указал дополнительно стили под различные разрешения экранов.

Но этот сайт я пока не адаптировал под разные экраны, на момент написания этой статьи размеры сайта указаны 995px и все размеры в px.

Адаптация сайта под разные разрешения в 2020 г. от верстальщиков

Современные интернет пользователи просматривают веб страницы не только с настольного компьютера, но и с разных мобильных гаджетов. Если сайт сделан давно, то его ещё не затронула волна адаптивности, актуальная в 2020 году.

Адаптировать ваш сайт под разные разрешения экрана помогут профессиональные html верстальщики. Современного html верстальщика не нужно учить адаптивной верстке, это стало стандартом. Несколько лет назад можно было использовать фиксированную верстку.

Эра мобильных гаджетов оказала сильное влияние на веб-дизайн. С появлением мобильного интернета стало актуально удобство пользования веб ресурсами с гаджета. Адаптивная верстка сайта решает проблему некомфортного просмотра сайта без мобильной версии.

Понятие отзывчивого дизайна было введено в 2010 г. Итаном Маркотом. В 2011 г. Густафсон опубликовал издание под именем «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», повлекшее использование этого термина. Понятие применяется в среде веб-дизайнеров по сей день.

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

Адаптация под разные разрешения экрана

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

мобильное – 320px
планшет – 768px
ноутбук – 1440px
настольный компьютер – 1920px

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

Но в целом, если вы дорожите аудиторией, то не помешает заказать веб-дизайн именно под 4 разрешения экрана. Т.к. верстальщики могут попортить дизайн при адаптации.

У вас есть необходимость в улучшении старого сайта под современные требования? Обращайтесь, вам поможет квалифицированная команда веб специалистов “Нужен сайт”. Для ваших клиентов мы создадим комфортный вид с любого гаджета!

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

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

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

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

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

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

Это означает, что дизайнеры и разработчики должны учитывать не только размеры экранов для адаптивной верстки, но и эти различия.

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

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

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

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

Используют контрольные точки. Они определяют ширину дисплея в пикселях. Это значение устройства корректируют в зависимости от размеров экранов.

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

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

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

@media screen and (max-width: 991px) {
/* стили для больших планшетов — начало */

}

@media screen and (max-width: 767px) {
/* стили для средних планшетов — начало */

}

@media screen and (max-width: 479px) {
/* стили для телефонов — начало */

}

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

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

Устройства Apple

	Разрешение дисплея	Viewport
iPhone
iPhone XR	828 x 1792	414 x 896
iPhone XS	1125 x 2436	375 x 812
iPhone XS Max	1242 x 2688	414 x 896
iPhone X	1125 x 2436	375 x 812
iPhone 8 Plus	1080 x 1920	414 x 736
iPhone 8	750 x 1334	375 x 667
iPhone 7 Plus	1080 x 1920	414 x 736
iPhone 7	750 x 1334	375 x 667
iPhone 6 Plus/6S Plus	1080 x 1920	414 x 736
iPhone 6/6S	750 x 1334	375 x 667
iPhone 5	640 x 1136	320 x 568
iPod
iPod Touch	640 x 1136	320 x 568
iPad
iPad Pro	2048 x 2732	1024 x 1366
iPad 3 и 4-го поколения	1536 x 2048	768 x 1024
iPad Air 1 и 2	1536 x 2048	768 x 1024
iPad Mini 2 и 3	1536 x 2048	768 x 1024
iPad Mini	768 x 1024	768 x 1024

Устройства Android

	Разрешение дисплея	Viewport
Телефон
Nexus 6P	1440 x 2560	412 x 732
Nexus 5X	1080 x 1920	412 x 732
Google Pixel 3 XL	1440 x 2960	412 x 847
Google Pixel 3	1080 x 2160	412 x 824
Google Pixel 2 XL	1440 x 2560	412 x 732
Google Pixel XL	1440 x 2560	412 x 732
Google Pixel	1080 x 1920	412 x 732
Samsung Galaxy Note 9	1440 x 2960	360 x 740
Samsung Galaxy Note 5	1440 x 2560	480 x 853
LG G5	1440 x 2560	480 x 853
One Plus 3	1080 x 1920	480 x 853
Samsung Galaxy S9+	1440 x 2960	360 x 740
Samsung Galaxy S9	1440 x 2960	360 x 740
Samsung Galaxy S8+	1440 x 2960	360 x 740
Samsung Galaxy S8	1440 x 2960	360 x 740
Samsung Galaxy S7 Edge	1440 x 2560	360 x 640
Samsung Galaxy S7	1440 x 2560	360 x 640
Планшеты
Nexus 9	1536 x 2048	768 x 1024
Nexus 7 (2013)	1200 x 1920	600 x 960
Samsung Galaxy Tab 10	800 x 1280	800 x 1280
Chromebook Pixel	2560 x 1700	1280 x 850

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

Оставить заявку

Десять проблем адаптивного дизайна и их решения — Блог HTML Academy

Благодаря адаптивным сайтам, быстро подстраивающимся под любое устройство и размер экрана, интернет меняется, чтобы предоставить пользователю наилучший опыт. Начиная с межнациональных корпораций, таких, как Sony, Microsoft и Nokia, и заканчивая мировыми техническими знаменитостями (Salesforce) и онлайн-гигантами для путешествий (Expedia), серьёзные игроки поворачиваются к адаптивному веб-дизайну, чтобы идти в ногу с современными тенденциями и достичь ещё более широкой аудитории.

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

1. Более проблематичный этап визуализации

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

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

2. Навигация

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

Решение: дизайнеры должны тратить больше времени, пытаясь сделать навигацию интуитивно понятной и очевидной. Изучение содержимого сайта и его информационной структуры, и понимание того, как и для чего пользователи просматривают сайт — это единственный способ сделать уникальное навигационное решение. Кроме того, тестирование навигации на максимально возможном числе устройств поможет разработчикам сделать его правильно.

3. Качество фоновых изображений и иконок

Изображения имеют ключевое значение для пользователя в вебе. В адаптивном дизайне изображения и иконки должны быть адаптивными, чтобы позволить пользователю наслаждаться графикой на устройствах с высокой плотностью пикселей, которые становятся более распространёнными. Цель каждого дизайнера и разработчика убедиться, что изображения не выглядят размытыми и плохо масштабированными.

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

4. Отображение данных на маленьких экранах

Отображение таблиц с данными (например, расписание авиарейсов) на маленьких экранах — настоящая проблема.

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

5. Быстрая загрузка на всех устройствах

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

Решение: постепенная загрузка, которая позволяет загружать только то, что нужно пользователю. Правило следующее: первым загружается контент, затем улучшения, a потом всё остальное. Используя подход «сначала мобильные», для пользователей, привыкших к большому числу контента, дизайнеры должны оставить только те элементы, которые необходимы. Распространение мобильных устройств опережает настольные компьютеры, поэтому постепенная загрузка — это решение. Благодаря использованию средств автоматизации для масштабирования и кэширования изображений, последующие изменения на сайте становятся проще. Из-за того, что соединение пользователя может быть неидеальным, производительность очень важна.

6. Длительные этапы дизайна, разработки и тестирования

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

Решение: проблема уже содержит в себе решение. Несмотря на то что адаптивные сайты могут потребовать больше времени на создание, они лучше подходят для постепенного изменения. Вместо капитальной переделки, которая стоит дороже и дольше по времени, адаптивные сайты могут развиваться шаг за шагом, сокращая владельцам в конечном счёте много времени и затрат.

7. Скрытие и удаление содержимого

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

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

8. Перевод фиксированных сайтов в адаптивные

Существует большая дилемма: менять ли менее гибкий код фиксированной вёрстки или оставить как есть и по-прежнему обеспечивать приемлемую производительность?

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

9. Старые версии Internet Explorer не поддерживают CSS3 медиавыражения

Когда вы работаете по принципу «сначала мобильные», ваш сайт может неправильно отображаться в старых версиях IE. В этом случае разработчикам необходимо найти способ поддерживать старый сайт на мобильных устройствах.

Решение: хорошая практика — беспокоиться о пользователях Internet Explorer и предлагать им удобное решение. Используя JavaScript, опытный разработчик может легко изменить расположение на странице в зависимости от размеров окна браузера. Для поддержки оригинальных макетов решением является использование полифилов, то есть части кода обеспечивающей технологии, которые, как ожидает разработчик, браузер должен предоставлять изначально. Другим решением может быть подключение отдельных стилей для IE с простым оформлением. Можно вообще ничего не делать, если это выглядит допустимо. Всё зависит от потребностей конечного пользователя.

10. Не все понимают, зачем им использовать адаптивный дизайн

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

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

Заключение

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

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

viewport — говорим с мобильным браузером и настраиваем изменение размера экрана

До того как вы начнете верстать под мобильную версию стоит вставить в шаблон сайта(в html код) строку с viewport. Эта строка вставляется в head, её задача объяснить мобильному браузеру как себя вести и как отображать сайт для вашего пользователя, к примеру данное решение растянет мобильный экран на 970 пикселей.

А данное решение позволит экрану быть адаптивным и удобно скроильться

Работаем с компьютера

Для того чтобы просмотреть сайт в мобильной версии в firefox необходимо нажать ctrl+shift+m, здесь же можно посмотреть и основные разрешения экрана. Ориентироваться нужно на оба расширения экрана как на вертикальное так и на горизонтальное. Повернуть экран можно стрелочкой сбоку.

Начиная с 800 пикселей ширина может быть меньше так как в некоторых операционных системах есть возможность разместить панель слева от основного экрана. Учитывая это стоит верстать так чтобы по краям оставались поля.

Адаптивная верста без заморочек

При разработке сайта учитывайте восприятие сайта гуглом, проверить этот параметр можно тут: https://search.google.com/search-console/mobile-friendly,https://testmysite.withgoogle.com/intl/ru-ru/,https://developers.google.com/speed/pagespeed/insights/. Приложение проверяет расширение 480 пикселей, именно это расширение нужно поправить для того чтобы максимально подружиться с гуглом. Другие расширения можно не трогать.

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

Смартфоны
@media only screen and (min-width : 320px) and (max-width : 479px) {

/*Тут будет CSS код для разрешения 320 пикселей и до 479 пикселей*/

}

Смартфоны 2
@media only screen and (min-width : 480px) and (max-width : 639px) {

/*Тут будет CSS код для разрешения 480 пикселей и до 639 пикселей*/

}

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

/*Тут будет CSS код для разрешения 640 пикселей и до 767 пикселей*/

}

Планшеты
@media only screen and (min-width : 768px) and (max-width : 1023px) {}

Настольные компьютеры и ноутбуки
@media only screen and (min-width : 1024px) and (max-width : 199px) {}

Настольные компьютеры и ноутбуки 2
@media only screen and (min-width : 1200px) and (max-width : 1529px) {}

Настольные компьютеры и ноутбуки 3
@media only screen and (min-width : 1530px) and (max-width : 1919px) {}

Большие экраны
@media only screen and (min-width : 1920px) {}

Адаптивный дизайн — разрешения для планшетов

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

600×800, 800×600

Ritmix RMD-825, 3Q Qoo! Q-pad, Texet TB-823A

768х1024, 1024×768

Apple iPad mini, Acer Iconia Tab

768×1366, 1366×768

ASUS Transformer Book, Samsung ATIV Smart, Acer Aspire

800х1280, 1280×800

Acer Iconia Tab A3, ASUS MeMO Pad, ASUS Nexus 7, Lenovo Yoga Tablet, Lenovo Idea Tab, Samsung Galaxy Tab, Sony Xperia Tablet

1080×1920, 1920×1080

Nokia Lumia 2520, Microsoft Surface, Samsung ATIV Smart, Lenovo ThinkPad, Acer Iconia Tab W700

1536×2048, 2048×1536

Apple iPad

1600×2560, 2560×1600

ASUS Transformer Pad, Samsung Galaxy Tab Pro

Адаптивная верстка — разрешения для смартфонов

240х320, 320х240

Nokia 225, Nokia Asha 230, Nokia 220, Samsung Galaxy Pocket, Samsung GT-C3590, HTC WildFire, HTC Touch3

320х480, 480х320

Samsung Galaxy S II, Samsung Galaxy Fame, Samsung Galaxy Young, Samsung Rex, Samsung Galaxy Pro, Nokia X6, Nokia E7, HTC Legend, HTC Salsa, HTC Hero, Apple iPhone 3

480х800, 800х480

Samsung Galaxy S III mini, Samsung Galaxy Golden GT, Samsung Galaxy Grand Neo, Nokia Lumia, Nokia X, Nokia XL, HTC Desire 300-500

540х960, 960х540

Samsung Galaxy Core, Samsung Galaxy S4 mini, HTC Desire 600-700, HTC One S, HTC Sensation XE, Sony Xperia

640х1136, 1136х640

Apple iPhone 4, Apple iPhone 5

720х1280, 1280х720

Samsung Galaxy S III, Samsung Galaxy Note, Samsung Galaxy Grand, Nokia Lumia 900+, Sony Xperia T2 Ultra, Sony Xperia Z1 Compact

750х1334, 1334×750

iPhone 6

1080х1920, 1920х1080

Samsung Galaxy S4, Samsung Galaxy S5, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, HTC One, HTC One MAX, HTC One M8

1440х2560, 2560х1440

LG G3, Samsung Galaxy S6

Современный телефон поворачивает экран при смене ориентации с портретной на ландшафтную, что приводит к необходимости создания отдельных дизайнов для каждой его ориентации. При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, iPhone 3 в горизонтальной ориентации имеет разрешение 480х320, а HTC Desire 300 в вертикальном положении имеет экран 480х800. И хотя ширина у обоих опорных дизайнов одинакова, из-за различной высоты этих экранов потребуется совершенно различный дизайн — ведь их экраны способны вместить совершенно различное количество интерфейсных элементов.

рис. Конфигурация элементов при одинаковой ширине, но различной высоте экрана
(HTC Desire 300 — 480×800, iPhone 3 — 480×320):

Вы видите, что, несмотря на одинаковую ширину экранных разрешений этих устройств в различных ориентациях, они фактически имеют разный размер: вертикальный HTC значительно уже горизонтального iPhone. Это обусловлено тем, что на 1 дюйме экрана iPhone 3 вмещает 165 пикселей, а экран HTC Desire 300 гораздо качественнее (217 пикселей/дюйм), что и приводит к этой разнице. Этот пример наглядно показывает, почему для многих ширин экрана делается по два (и иногда по 3) различных адаптивных дизайна.