Размеры экранов в пикселях: Размеры и разрешение экранов телефонов, телевизоров, ноутбуков

© 2014-2021 Бизнес-справочник «кодификатор.ру»

Таблица разрешений экранов популярных смартфонов

Apple iPhone 4/4S	3	640×960
Apple iPhone 5	4	640×1136
Apple iPhone 5C/5S	4	640×1136
Apple iPhone 6	4.7	1334×750
Apple iPhone 6 Plus	5.5	1920×1080
Apple iPhone 6S	4.7	1334×750
Apple iPhone 6S Plus	5.5	1920×1080
Apple iPhone 7	4. 7	1334×750
Apple iPhone 7 Plus	5.5	1920×1080
Apple iPhone SE	4	1136×640
ASUS Zenfone 2 Lazer ZE500KL	5	1280×720
BlackBerry Bold 9900	2.8	640×480
BlackBerry Z10	4.2	768×1280
Fly IQ451 Vista	5	720×1280
HTC Desire 600	4.5	540×960
HTC Desire C	3.5	320×480
HTC Desire SV	4.3	480×800
HTC Desire V	4	480×800
HTC Desire X	4	480×800
HTC One	4.7	1080×1920
HTC One 32Gb	4.7	1080×1920
HTC One S	4.3	540×960
HTC One SV	4.3	480×800
HTC One X	4.7	720×1280
HTC One X+	4.7	720×1280
HTC Windows Phone 8s	4	480×800
HTC Windows Phone 8x	4.3	720×1280
Huawei Ascend G630	5	720×1280
Huawei Honor 5X	5.5	1920×1080
Huawei Honor 6	5	1080×1920
Huawei Honor 7	5.2	1920×1080
Jiayu G6 Advanced	5.7	1080×1920
Lenovo IdeaPhone P770	4.5	540×960
Lenovo IdeaPhone S720	4.5	540×960
Lenovo K900	5.5	1080×1920
Lenovo P70	5	1280×720
Lenovo S60	5	1280×720
Lenovo Vibe Shot	5	1920×1080
LG G2 D802	5.2	1080×1920
LG Nexus 4 16Gb	4.7	768×1280
LG Nexus 5	4.95	1080×1920
LG Optimus 4X HD	4.7	720×1280
LG Optimus G	4.7	768×1280
LG Optimus G Pro E988	5.5	1080×1920
LG Optimus L5	4	320×480
LG Optimus L5 II Dual E455	4	480×800
LG Optimus L7 II Dual P715	4.3	480×800
LG Optimus L7 P705	4.3	480×800
LG Optimus L9	4.7	540×960
Meizu M2 Note 16Gb	5.5	1920×1080
Nokia 808 PureView	4	360×640
Nokia Asha 311	3	240×400
Nokia Lumia 520	4	480×800
Nokia Lumia 620	3.8	480×800
Nokia Lumia 720	4.3	480×800
Nokia Lumia 800	3.7	480×800
Nokia Lumia 820	4.3	480×800
Nokia Lumia 920	4.5	768×1280
Nokia Lumia 925	4.5	768×1280
Nokia X Dual Sim	4	480×800
Philips Xenium W732	4.3	480×800
Philips Xenium W832	4.5	540×960
Samsung Ativ S 16Gb GT-I8750	4.8	720×1280
Samsung Galaxy A5	5	1280×720
Samsung Galaxy A5 2016	5.2	1920×1080
Samsung Galaxy Ace Duos GT-S6802	3.5	320×480
Samsung Galaxy Ace GT-S5830	3.5	320×480
Samsung Galaxy Ace II GT-I8160	3.8	480×800
Samsung Galaxy Grand GT-I9082	5	480×800
Samsung Galaxy Mega 5.8 GT-I9152	5.8	540×960
Samsung Galaxy Mega 6.3 8Gb GT-I9200	6.3	720×1280
Samsung Galaxy Nexus GT-I9250	4.65	720×1280
Samsung Galaxy Note GT-N7000	5.3	800×1280
Samsung Galaxy Note II GT-N7100	5.55	720×1280
Samsung Galaxy S Duos GT-S7562	4	480×800
Samsung Galaxy S II GT-I9100	4.27	480×800
Samsung Galaxy S II Plus GT-I9105	4.3	480×800
Samsung Galaxy S III GT-I9300 16Gb	4.8	720×1280
Samsung Galaxy S III mini GT-I8190	4	480×800
Samsung Galaxy S4 GT-I9500	5	1080×1920
Samsung Galaxy S4 GT-I9505	5	1080×1920
Samsung Galaxy S4 mini GT-I9190	4	540×960
Samsung Galaxy S4 mini GT-I9195	4.27	540×960
Samsung Galaxy S4 Zoom SM-C101	4.3	540×960
Samsung Galaxy S5	5.1	1080×1920
Samsung Galaxy S6 SM-G920F	5.1	2560×1440
Samsung Galaxy Win GT-I8552	4.7	480×800
Samsung Galaxy Y Duos GT-S6102	3.14	240×320
Samsung Galaxy Y GT-S5360	3	240×320
Sony Xperia acro S	4.3	720×1280
Sony Xperia E dual	3.5	320×480
Sony Xperia go	3.5	320×480
Sony Xperia ion	4.55	720×1280
Sony Xperia J	4	480×854
Sony Xperia L	4.3	480×854
Sony Xperia miro	3.5	320×480
Sony Xperia P	4	540×960
Sony Xperia S	4.3	720×1280
Sony Xperia sola	3.7	480×854
Sony Xperia SP	4.6	720×1280
Sony Xperia tipo	3.2	320×480
Sony Xperia TX	4.55	720×1280
Sony Xperia V	4.3	720×1280
Sony Xperia Z	5	1080×1920
Sony Xperia Z1	5	1080×1920
Sony Xperia Z1 Compact	4.3	720×1280
Sony Xperia Z2	5.2	1080×1920
Sony Xperia ZL	5	1080×1920
Sony Xperia ZR LTE (C5503)	4.55	720×1280
YotaPhone — цвет.	4	720×1280
YotaPhone — чб	4	360×640

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

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

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

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

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

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

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

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

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

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

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

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


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

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

}

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

}

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

}

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

Устройства Apple

Устройства Android

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

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

§ 70. Разрешение экранов. И немного о происхождении 72 точек на дюйм

Артемий Лебедев

24 июня 2001

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

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

Если вы хотите узнать разрешение своего экрана, воспользуйтесь калькулятором:

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

Вернемся к загадочным цифрам, о которых мы говорили в прошлом параграфе. Откуда произошли стандартные разрешения в 72 и 96 точек на дюйм? С Макинтошами мониторы традиционно поставлялись с заранее определенным разрешением, и менять его было нельзя. «Эппл» исходила из того, что «визивиг» возможен при 72 точках на дюйм, и отход от этого разрешения непозволителен. В мире писюков, напротив, мониторы традиционно были с переменным разрешением, и это поддерживалось программно. При этом «Микрософт» посчитала, что в 14-дюймовый экран вполне может вписаться изображение размером 1024×768. Методом научного тыка было выбрано разрешение в 96 точек на дюйм (в 1,3 раза больше макинтошного).

В середине 90-х годов прошлого века «Эппл» дозрела до понимания, что индустрия ускакала далеко вперед и 72 пикселей в одном линейном дюйме уже недостаточно, так как мониторы стоят денег, а тратить пару тысяч на 21-дюймовый экран для Мака, который показывает столько же, сколько писишный 17-дюймовый, желающих становилось все меньше.

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

Казалось бы, бог с ним. Но нет. То самое предположение о разрешении, зашитое в систему (в «Виндоус» можно менять значение, но обычный пользователь этого никогда в жизни не делает), напрямую влияет на размер экранных шрифтов. Шрифт размером в 72 пункта (то есть почти в дюйм) на Маке будет занимать 72 пикселя, а на писюке — 96 (на треть больше дюйма).

Но мониторы-то в наши дни у всех одни и те же, как и разрешения. В результате получается, что все писишники совершенно не понимают, чем же так хорош 12-пунктовый текст — у них-то на экране он высотой в 16 пунктов (пикселей). И что мы получаем в результате? Тотальное использование <font size=-1> практически на всех сайтах. А макинтошники вечно недоумевают: как же это можно читать текст высотой в четыре пикселя?

Картинки везде показываются одинаково, потому что меряются они в пикселях. Но скоро перестанут. О том, почему разрешению в будущем отведена бóльшая роль, а также о том, почему пиксельная графика умрет, — следующий параграф.

Заказать дизайн…

Размер экрана, размер изображения экрана и разрешение экрана

Точнее сказать, это конечно размер экрана по диагонали. Но так как обычно именно этот размер всегда указывается в технических характеристиках устройств, то обычно под ним и понимается размер экрана.
Величина диагонали в дюймах используется не только для указания размера экрана телефонов, а так же телевизоров и мониторов. Но нас в данном случае интересуют смартфоны.
Размеры экранов смартфонов бывают разные от 3.5 дюйма до 6 дюймов. Обычно размер в дюймах обозначается двойной кавычкой после цифры, например: 3.5”, 3.7” и т.д.
Размер экрана, это одна из величин которая используется для вычисления разрешения экрана.

РАЗМЕР ИЗОБРАЖЕНИЯ ЭКРАНА 

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

Вот мы плавно и подошли к пониманию того, что такое разрешение экрана. Об этом в следующем разделе.

Размер изображения экрана указывается двумя цифрами, первая указывает величину в пикселях по ширине, вторая — по высоте. Например: 480×800, 640×960 и т.д.

РАЗРЕШЕНИЕ ЭКРАНА

Разрешение экрана – это количество пикселей на дюйм (PPI — pixels per inch).

Здесь все логично. Размер экрана измеряется в дюймах, размер изображения – в пикселях.
Чем больше пикселей умещается в одном дюйме, тем меньше размер одного пикселя, тем меньше пиксели различимы невооруженным взглядом и тем чётче изображение, которые вы видите на экране.
Опять же надо заметить, что PPI это количество пикселей умещающихся в ряд на одном дюйме. Иногда думают что PPI – это то количество пикселей на квадратный дюйм, но это не так. Для пикселей на квадратный дюйм используется понятие Pixels Per Square Inch. Чтобы стало более понятно как соотносятся эти две величины посмотрите табличку ниже:

Характеристики экрана HTC Desire S:
Размер экрана = 3.7”
Ширина экрана = 480px
Высота экрана = 800px
Воспользовавшись приведенными формулами получаем PPI = 252

Напоследок классическое определение того, что такое разрешение.

Разрешение — величина, определяющая количество точек (элементов растрового изображения) на единицу площади (или единицу длины).

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

Стоит заметить что при одном размере экрана, размер изображения у разных телефонов может быть разный и как следствие разный PPI, то есть разное качество экрана. Возьмем, например iPhone 4 и HTC Desire 200 и сравним их характеристики.

И чтобы еще стало понятней как PPI влияет на качество изображения вот небольшой примерчик:

Разрешение экрана — это… Что такое Разрешение экрана?

Как узнать разрешение экрана на Windows 7, 8, 10

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

Современное общество использует в основном ЖК (плоские) мониторы, которые пришли на смену громоздким ЭЛТ мониторам. Устройства с плоскими экранами предлагают множество форм и размеров, к примеру, широкоформатные экраны используют соотношение сторон 16:9 (10), стандартные 4:3.

ЖК имеет заранее заданное соотношение пикселей матрицы, в ЭЛТ оно отсутствует. На основании этой характеристики Windows сама устанавливает приемлемое разрешение, частоту обновления, цветопередачу. Получив информацию по мониторам, давайте перейдем к определению текущего и родного  разрешения экрана.

Просмотр разрешения через стандартные возможности Windows

Узнать разрешение экрана на Windows 7, 8, 10 довольно просто. В диалоговом окне Выполнить введите команду desk.cpl, нажмите Enter для открытия окна параметров экрана.

В Виндовс 7, 8 до этих настроек Вы можете еще добраться такими способами:

1. Нажмите правой кнопкой на рабочем столе (на пустом месте), и в меню выберите «разрешение экрана».
2. Вызовите панель управления Windows 7, 8, затем задайте представление «категория». В блоке «оформление и персонализация» кликните параметр «настройка разрешения экрана».

В настройках экрана Вы увидите такие параметры: выбор дисплея, изменение разрешения монитора, смена поворота экрана. Обратите внимание на второй параметр, посмотрев на него, Вы определите текущее разрешение экрана в пикселях по ширине, высоте.

Определение родного разрешения монитора

Чтобы узнать разрешение монитора, можно воспользоваться помощью настроек экрана, описанную выше. Windows сама выставляет оптимальные параметры изображения, поэтому практически всегда текущее разрешение соответствует родному, с пометкой «рекомендуется».

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

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

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

Посмотреть разрешение экрана можно на сайте производителя, любом другом ресурсе или в документации. Достаточно знать фирму производителя и модель монитора, ноутбука. Эти данные нанесены на мониторе или в форме наклейки на ноутбуке, а также их можно узнать в документации. Теперь Вы знаете, как узнать разрешение экрана на Windows 7, 8, 10. Надеюсь рекомендации Вам помогли и закрепили знания.

Посмотрите еще статьи:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Каковы типичные размеры мониторов и какой лучше?

Цены, спецификации, наличие и условия предложений могут быть изменены без предварительного уведомления. Ценовая защита, соответствие цен или гарантии цен не распространяются на внутридневные, ежедневные предложения или ограниченные по времени рекламные акции. Ограничения по количеству могут применяться к заказам, включая заказы на товары со скидкой и рекламные товары. Несмотря на все наши усилия, небольшое количество товаров может содержать ошибки в ценах, типографике или фотографиях. Правильные цены и рекламные акции подтверждаются во время размещения вашего заказа.Эти условия применимы только к продуктам, продаваемым на HP.com; предложения реселлеров могут отличаться. Товары, продаваемые на HP.com, не подлежат немедленной перепродаже. Заказы, не соответствующие условиям и ограничениям HP.com, могут быть отменены. Контрактные и оптовые заказчики не имеют права.

Рекомендованная производителем розничная цена HP может быть снижена. Рекомендуемая производителем розничная цена HP указана либо как отдельная цена, либо как сквозная цена с указанием цены со скидкой или со скидкой. На скидки или рекламные цены указывает наличие дополнительной более высокой сквозной цены MSRP

Следующее относится к системам HP с Intel 6-го поколения и другим процессорам будущего поколения в системах, поставляемых с Windows 7, Windows 8, Windows 8.1 или Windows 10 Pro с пониженной версией до Windows 7 Professional, Windows 8 Pro или Windows 8.1: эта версия Windows, работающая с процессором или наборами микросхем, используемыми в этой системе, имеет ограниченную поддержку со стороны Microsoft. Дополнительные сведения о поддержке Microsoft см. В разделе часто задаваемых вопросов о жизненном цикле поддержки Microsoft по адресу https://support.microsoft.com/lifecycle

Ultrabook, Celeron, Celeron Inside, Core Inside, Intel, логотип Intel, Intel Atom, Intel Atom Inside, Intel Core, Intel Inside, логотип Intel Inside, Intel vPro, Itanium, Itanium Inside, Pentium, Pentium Inside, vPro Inside, Xeon, Xeon Phi, Xeon Inside и Intel Optane являются товарными знаками корпорации Intel или ее дочерних компаний в США.С. и / или другие страны.

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

HP передаст в Bill Me Later® информацию о вашем имени и адресе, IP-адрес, заказанные продукты и связанные с ними расходы, а также другую личную информацию, связанную с обработкой вашего заявления.Bill Me Later будет использовать эти данные в соответствии со своей политикой конфиденциальности.

Microsoft Windows 10: не все функции доступны во всех выпусках или версиях Windows 10. Для использования всех функций Windows 10 системам может потребоваться обновленное и / или отдельно приобретенное оборудование, драйверы, программное обеспечение или обновление BIOS. Windows 10 обновляется автоматически, что всегда включено. Могут применяться сборы интернет-провайдера, и со временем могут применяться дополнительные требования для обновлений. См. Http://www.microsoft.com.

Соответствующие критериям HP Rewards продукты / покупки определяются как продукты / покупки из следующих категорий: Принтеры, ПК для бизнеса (бренды Elite, Pro и Workstation), выберите Аксессуары для бизнеса и выберите Чернила, Тонер и бумага.

Какой идеальный размер экрана для адаптивного дизайна

По состоянию на 2020 год в мире 3,5 миллиарда пользователей смартфонов. Это 45% населения Земли. По состоянию на 2019 год люди выходили в Интернет с более чем 9000 различных устройств. Каждый пользователь ожидает, что каждый веб-сайт, к которому он обращается, будет безупречно отображаться на его мобильном устройстве. Это означает, что разработчики веб-сайтов должны создавать веб-сайты, которые будут отображаться на экранах разных размеров по всему миру.

Другими словами, им нужен адаптивный дизайн.

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

Адаптивный веб-дизайн относится к стратегии дизайна, которая создает веб-сайты, которые хорошо работают на мобильных, планшетных и настольных устройствах. Веб-сайты без адаптивного дизайна рискуют оттолкнуть значительное количество пользователей — 80% пользователей заявили, что они откажутся от веб-сайтов, которые не работают на их устройствах.

Кроме того, Google рассматривает «удобство для мобильных устройств» как параметр для ранжирования. Цитата из центрального блога Google для веб-мастеров,

«. Начиная с 21 апреля (2015 г.), мы будем расширять использование удобства для мобильных устройств в качестве сигнала ранжирования. Это изменение повлияет на мобильный поиск на всех языках мира и окажет значительное влияние на наши результаты поиска. Следовательно, пользователям будет проще получать релевантные высококачественные результаты поиска, оптимизированные для их устройств .”

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

Статистика разрешения экрана мобильных устройств по всему миру: январь 2020 г. — январь 2021 г.

Обратите внимание, что переход пользователей с экрана меньшего размера (360 * 640) значительно снизился с января 2020 г. по январь 2021 г.Несмотря на то, что это очень важный размер мобильного экрана, большая часть аудитории по-прежнему остается на нем. Хотите проверить, как ваш сайт выглядит в этом разрешении? Протестируйте сейчас.

Статистика разрешения экрана по всему миру: январь 2020 г. — январь 2021 г.

Источник изображения

Согласно мировой статистике разрешения экрана (январь 2020 г. — январь 2021 г.), наиболее часто используемые разрешения на мобильных устройствах, настольных компьютерах и планшетах: :

• 1920 × 1080 (8.89%)
• 1366 × 768 (8,44%)
• 360 × 640 (7,28%)
• 414 × 896 (4,58%)
• 1536 × 864 (3,88%)
• 375 × 667 (3,75%)

Бесплатный тест на отзывчивость на часто используемых разрешениях

Попробуйте проверить отзывчивость своего веб-сайта на реальных устройствах.

Конечно, упор на мобильность не означает отказа от настольных устройств. Как показано в таблице ниже, настольные устройства по-прежнему составляют значительную часть использования Интернета.

Знаете ли вы, , как определять отзывчивые точки останова?

Доля рынка настольных ПК, мобильных и планшетов в мире: январь 2020 г. — январь 2021 г.

Источник изображения

Согласно документации Microsoft,

С огромным количеством целевых устройств и размеров экрана в экосистеме Windows 10 , вместо оптимизации пользовательского интерфейса для каждого устройства мы рекомендовали разработать несколько категорий ширины клавиш (также называемых «точками останова»):

• Маленький (меньше 640 пикселей)
• Средний (от 641 до 1007 пикселей)
• Большой (1008 пикселей и больше)

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

Проверить скорость реакции веб-сайта бесплатно

Знаете ли вы: Как протестировать свой веб-сайт на экранах разных размеров с помощью бесплатных инструментов? Выяснить.

Становится намного проще разработать веб-сайт для нескольких размеров экрана с помощью следующих рекомендаций:

• Знайте свои точки останова : В адаптивном дизайне точка останова — это «точка» », При котором содержание и дизайн веб-сайта будут адаптироваться определенным образом, чтобы обеспечить наилучшее взаимодействие с пользователем. Чтобы сделать веб-сайт адаптивным, дизайнеры должны добавить точку останова, когда контент выглядит смещенным.В зависимости от количества устройств, на которые выравнивается сайт, необходимо установить несколько точек останова, чтобы обеспечить его отзывчивость. Обратитесь к этой статье об адаптивных точках останова, чтобы узнать о них и их эффективности подробно.
• Создание гибких дизайнов : Гибкий дизайн — это макет дизайна, который может смещаться (расширяться и сжиматься), чтобы соответствовать области просмотра устройства, на котором он работает. Фиксированный макет дизайна будет нежелательно искажать все области просмотра, по которым они не выровнены. Работайте над макетами дизайна, используя% единиц, а также максимальную ширину, чтобы макет соответствовал видовым экранам мобильного устройства, не становясь слишком широким на видовых экранах настольных устройств.
• Уменьшение трения : Это в основном означает, что конструкция должна быть простой в использовании на нескольких устройствах. Адаптивный дизайн включает не только то, как выглядит веб-сайт, но и то, как он работает с точки зрения доступности и удобства использования. Сосредоточьтесь особенно на трении на маленьком экране, потому что по мере уменьшения размеров экрана веб-элементы имеют меньше места для рендеринга и с большей вероятностью будут скремблироваться и искажаться.
• Дизайн, ориентированный на мобильные устройства : поскольку трение более вероятно на экранах меньшего размера, при разработке следует использовать подход, ориентированный на мобильные устройства.Сложнее сузить макет рабочего стола для мобильного окна просмотра, тогда как сделать наоборот проще. При проектировании, ориентированном на мобильные устройства, дизайнер включает в себя все, что абсолютно необходимо для обеспечения оптимального взаимодействия с пользователем.

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

1. Расставить приоритеты по важным параметрам меню
2. Убрать все визуальные отвлекающие факторы
3. Оптимизировать дизайн для удобного касания — упростить касание
4. Удалите ненужные формы и информационные поля.
5. Выделите основной CTA.
6. Выделите основные функции поиска и фильтрации.

• Больше функциональности, меньше набора текста : Очевидно, что печатать на мобильных устройствах сложнее, чем на настольных.Поэтому имеет смысл минимизировать необходимость набора текста на мобильных версиях веб-сайтов. Замените набор текста сознательным использованием функций устройства, таких как GPS, считывание QR-кода, биометрическое удостоверение личности и т. Д. Сделайте так, чтобы пользователям было проще делиться информацией, писать по электронной почте или звонить по соответствующим номерам, разместив ссылки, запускающие необходимые функции. Имейте в виду, что лучший адаптивный дизайн предполагает упрощение и устранение неудобных мобильных взаимодействий.
• Тестировать, тестировать, тестировать : как только разработчик или дизайнер знает, какие размеры экрана лучше всего подходят для адаптивного дизайна, он выполняет работу и создает адаптивный веб-сайт.Однако, чтобы убедиться, что веб-сайт действительно отображается так, как задумано, на устройствах, для которых он был создан, его необходимо протестировать именно на это. Легкий способ сделать это — использовать средство проверки адаптивного дизайна. Вместо того, чтобы запускать веб-сайт через отдельные устройства с разными окнами просмотра, введите URL-адрес в средство проверки и посмотрите, как он отображается на множестве новейших устройств при разном, часто используемом разрешении устройства. Приведенная выше программа проверки предлагает отзывчивую проверку на последних мобильных устройствах, таких как iPhone X, Galaxy Note 10, iPhone 8 Plus и других.Кроме того, используйте облако BrowserStack, чтобы проверить, как веб-сайт отображается на тысячах мобильных и настольных устройств. Просто зарегистрируйтесь бесплатно, выберите необходимое устройство, перейдите на веб-сайт и проверьте, как оно выглядит в реальных условиях пользователя.

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

Попробуйте адаптивную проверку бесплатно

Стандартные размеры области просмотра для мобильных устройств

Использование значения meta viewport width = device-width указывает странице на соответствие ширине экрана в независимых от устройства пикселях. Это позволяет переформатировать содержимое страницы для соответствия разным размерам экрана, независимо от того, отображается ли она на маленьком мобильном телефоне или на большом настольном мониторе.

Элемент области просмотра метатега

Устройства Apple

Устройства Android

Почему нужно быть мобильным?

• Использование мобильных устройств стремительно растет
• Mobile First search indexing
• Один сайт на нескольких устройствах
• Единый URL-адрес с одним контентом
• Блоги и социальные сети привлекают посетителей с мобильных устройств
• Рекомендовано Google
• Адаптивный дизайн выгоден для SEO
• Адаптивный дизайн для устройств будущего

В конце 2012 года компания Google провела независимый опрос под названием «Чего пользователи больше всего хотят от мобильных сайтов сегодня.«Из 1088 опрошенных пользователей смартфонов около 67 процентов указали, что они с большей вероятностью купят продукт или услугу у компании, которая создала удобный для мобильных устройств веб-сайт. Кроме того, 61 процент пользователей заявили, что они покинут сайт, который не оптимизирован для мобильных устройств, и очевидно, что наличие удобного для мобильных устройств сайта важнее, чем когда-либо.

Оптимизирован ли ваш сайт для мобильных устройств?

Узнайте, оптимизирован ли ваш сайт для мобильных устройств, с помощью нового инструмента Google для мобильных устройств

MobileRead Wiki — размеры экрана

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

[править] Обзор

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

Рядом с размером экрана следующее важное число связано с количеством пикселей на экране. Обычно это обозначается как PPI (пикселей на дюйм), который связывает размер экрана и разрешение экрана. Цифровые камеры используют чистое общее количество пикселей в качестве меры, которую также можно применить к экрану, умножив количество пикселей в ширину на высоту.Современные большие портативные экраны теперь могут достигать или превышать 5,0 МП (мегапикселей), что напрямую зависит от того, насколько большое изображение они могут показать при полном разрешении.

Если вы хорошо визуализируете, вы можете использовать указанные размеры и линейку, чтобы вырезать из бумаги точный размер, а затем сравнить.

[править] Соотношение сторон

В то время как диагональное число удобно использовать для определения размера экрана, важным размером экрана на самом деле является область экрана, которая определяет общее количество букв и, следовательно, слов, которые могут появиться на странице.Площадь связана с размером диагонали соотношением сторон. Это термин, который описывает отношение высоты дисплея к ширине дисплея. Например, 5-дюймовый экран с высотой 4 дюйма и шириной 3 дюйма будет иметь соотношение 4: 3 или иногда представлено делением меньшего числа на большее как 1,33: 1. Площадь такого экрана будет составлять 12 квадратных дюймов. . Более узкий экран будет иметь меньшую область чтения. Например, экран 5 дюймов с соотношением сторон 16: 9 будет иметь высоту 4,35 дюйма и 2.45 дюймов в ширину и имеют площадь для чтения всего 10,6 квадратных дюйма. Некоторые КПК и сотовые телефоны используют соотношение 3: 2 на небольших карманных устройствах, хотя 4: 3 также популярно.

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

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

Сравнение устройств с другим соотношением сторон экрана может быть затруднительным.Для этих сравнений могут быть полезны значения площади, MP и PPI. Для данного размера экрана квадратный экран будет иметь наибольшую площадь, а чем больше он будет вытянут, тем меньше будет площадь. Площадь напрямую связана с количеством слов, которые уместятся на экране для чтения. Поскольку соотношение часто отображается с другим знаменателем, например 3 (4: 3) или 9 (16: 9), вы можете захотеть показать соотношение, используя фиксированное значение. Просто разделите высоту на ширину, чтобы получить фактическое соотношение.Для дисплея 4: 3 мы имеем 1,333: 1. Затем умножьте на число, которое вы хотите сравнить, например 9, и вы получите 12: 9.

[править] соотношение сторон 4: 3

Это соотношение используется на большинстве ЭЛТ-мониторов и считается приятным на вид, хотя для читателей электронных книг вы, вероятно, предпочтете портретный режим. Он часто используется с программами для чтения электронных книг, особенно с дисплеями E Ink. Компьютерные мониторы имеют стандартные размеры пикселей для этого соотношения: 640 x 480 (VGA), 800 x 600, 1024 x 768, 1280 x 1024, 1600 x 1200 и 2048 x 1536 для квадратных пикселей.Многие устройства для чтения электронных книг используют одно из этих стандартных значений, но могут иметь экраны с не совсем соотношением сторон 4: 3 или могут использовать пиксели не совсем квадратной формы. По этим причинам вычисленные значения PPI могут отличаться для горизонтального и вертикального, и может отображаться среднее значение. Это соотношение также называется 1,33: 1 или просто 1,33: 1. Обратите внимание, что стандартная бумага для евро имеет соотношение 1,41: 1 и будет близко к этому соотношению, а бумага для Северной Америки — 1,3: 1, что даже ближе, но с другой стороны. Таким образом, это будет идеальное соотношение для файлов PDF.Обратите внимание, что в этом списке показаны 11-дюймовые iPad Pro и iPad Air 10.9, но их фактическое соотношение сторон составляет 1,43: 1 (4,3: 3), что делает их подходящими для европейского стандарта.

[править] Соотношение 16: 9

Также известный как широкоэкранный , это стандарт для новых телевизоров высокой четкости (HD), который также использовался на многих экранах новых компьютеров. Он также известен как 1,77: 1. Однако компьютерные экраны иногда на самом деле имеют формат 16:10 (8: 5) или имеют немного большее количество пикселей, чем было бы нормальным для настоящего экрана 16: 9.В частности, устройства Android имеют соотношение 8: 5 (1,6: 1). Телевизоры True High Definition имеют разрешение 720p (720 x 1280 пикселей), 1080p или 1080i (1080 x 1920 пикселей иногда называют «Full HD»). Экран маленького компьютера с разрешением 800 x 480 на самом деле был бы 800 x 450, если бы он имел истинное соотношение сторон 16: 9. Либо экран немного шире (16: 9,6), либо пиксели не квадратные, чтобы добиться этой разницы. По этим причинам вычисленные значения PPI могут отличаться для горизонтального и вертикального, и может отображаться среднее значение.

[править] Соотношение 3: 2

Это соотношение используется на некоторых карманных устройствах, таких как КПК и сотовые телефоны с экранами меньше 4 дюймов, хотя на этих устройствах также используются экраны 4: 3.Иногда он отображается как 1,5: 1 и называется широким экраном. Пиксели на экранах с соотношением сторон 3: 2 часто не квадратные. По сравнению со стандартным широкоформатным экраном это эквивалент 13,5: 9. На ноутбуках есть экраны большего размера.

[редактировать] сверхширокий

Это действительно широкоформатные устройства. Изначально сверхширокий экран (сверхширокий экран) представлял собой 29-дюймовый монитор с соотношением сторон 21: 9 и разрешением 2560 x 1080. Мобильные устройства, представленные ниже, немного более портативны. Соотношение показано как значение, умноженное на 9, чтобы понять отношения которые сравниваются с HD 16: 9. Соотношение 4: 3 равно 12: 9. Вы также можете выполнить деление для ссылки как 2.XX: 1. 18: 9 будет точно 2: 1. Некоторые из них экраны имеют закругленные углы, что означает, что углы самого экрана скруглены, что затрудняет получение точных прямоугольных эквивалентных размеров диагонали.У них также может быть вырез наверху для камеры и других датчиков. Эти экраны не показаны в разделе «Номенклатура», поскольку у них нет именных обозначений.

[править] Номенклатура

Определенные размеры считаются стандартными с определенными названиями и разрешениями экрана. Эти стандарты представляют собой сочетание формата 4: 3 и широкого экрана. К ним относятся:

[править] Для получения дополнительной информации

Общие сведения о разрешении и размере экрана для разработки приложений

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

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

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

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

Почему?

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

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

Итак, как видите, и размер экрана, и размер разрешения важны, но по разным причинам.

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

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

Вот что вам нужно знать.

Как рассчитать количество пикселей на дюйм

Вы должны понимать разницу между размером экрана и размером разрешения экрана.

Размер экрана измеряется в дюймах. Это размер фактического экрана конкретного устройства.

Например, вот размеры экранов некоторых из последних моделей iPhone от Apple, с которыми вы, вероятно, знакомы.

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

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

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

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

Разрешение экрана iPhone X составляет 2436 x 1125. В то время как Samsung Galaxy Note 8 имеет разрешение 2960 x 1440.

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

1. Сложите квадраты обоих чисел в разрешении
2. Извлеките квадратный корень из этого числа
.
3. Разделить предыдущее число на размер экрана

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

Давайте использовать iPhone X, так как он новый, и мы уже рассмотрели размер и разрешение экрана. У нас есть вся информация, необходимая для расчета PPI.

• 2436 x 2436 + 1125 x 1125 = 7199721 (возведение в квадрат обоих чисел разрешения)
• 7199721 / 2683,23 = 2683,23 (квадратный корень из предыдущего ответа)
• 2683,23 5,8 (дюймовый экран) = 462 PPI

Согласно техническим характеристикам Apple iPhone, их PPI составляет 2436 x 1125 пикселей 5.8-дюймовый iPhone X — это 458-й, так что наши расчеты были не за горами.

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

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

Итак, что произойдет, если вы попытаетесь объединить эту формулу, используя два устройства разного размера и разрешения? Это просто не сработает.

Например, возьмем разрешение старой модели iPhone, такой как 4-дюймовый SE , и применим его к 12,9-дюймовому iPad Pro.

Следуйте формуле, используя указанное выше разрешение в пикселях.

• 1136 x 1136 + 640 x 640 = 1700096
• 1700096 / 1303,88 = 1303,88

Но теперь вместо того, чтобы делить это число на 4-дюймовый размер экрана, как вы должны, давайте разделим его на 12,9, то есть на размер iPad Pro.

• 1303.88 / 12,9 = 101,08

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

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

Грохоты разные

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

По данным Интернета веб-трафика с глобальной точки зрения , смартфоны с разрешением 720 x 1280 пикселей являются самыми популярными.

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

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

Вы также должны учитывать другие типы экранов, например:

HD означает высокое разрешение, а QHD — четверть высокого разрешения.

Разрешение пикселей для экранов высокой четкости составляет 1920 x 1080. Четверть экранов высокой четкости имеют разрешение 960 x 540 пикселей.

Некоторые примеры экранов QHD включают:

• Sony Xperia M2
• HTC Desire 601
• Samsung Галактика S4

Итак, что популярнее? Экраны Full HD или экраны QHD? Исследования показывают, что популярность экранов QHD снижается.

В то же время мы наблюдаем рост на экранов Full HD на с точки зрения глобального веб-трафика.

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

Тем из вас, кто планирует создать приложение в будущем, следует уделять больше внимания экранам HD, а не экранам QHD.

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

Как можно использовать различные размеры экрана

ОК. Таким образом, телефоны, планшеты и другие устройства имеют разные размеры экрана, разрешение и количество пикселей на дюйм. Есть даже разные типы экранов.

Что теперь?

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

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

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

Убедитесь, что вы учитываете различные размеры экрана, когда используете Auto Layout для создания расширенной анимации iOS .

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

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

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

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

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

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

Заключение

Есть разница между размером экрана и разрешением экрана.

Вы собираетесь использовать оба этих числа, чтобы вычислить количество пикселей на дюйм (PPI) конкретных устройств.

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

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

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

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

Как элементы дизайна вашего приложения адаптируются к экранам различных размеров и разрешений для пользователей с разными устройствами?

Размер области просмотра Google Pixel, разрешение, PPI, характеристики экрана и медиа-запросы CSS

Размеры Google Pixel

  @media only screen and (min-width: 412px) and (max-width: 767px) {/ * Your Styles ... * /}  

  @media only screen and (min-width: 412px) {/ * Your Styles... * /}  

  @media only screen and (min-height: 732px) {/ * Your Styles ... * /}  

  @media only screen and (min-width: 732px) and (Ориентация: альбомная) {/ * Ваши стили ... * /}  

  @media only screen and (min-width: 412px) and (Ориентация: портрет) {/ * Ваши стили... * /}  

  @media
  только экран и (-webkit-min-device-pixel-ratio: 2.625),
  только экран и (min - moz-device-pixel-ratio: 2.625),
  только экран и (-o-min-device-pixel-ratio: 2,625 / 1),
  только экран и (min-device-pixel-ratio: 2,625),
  только экран и (минимальное разрешение: 441dpi),
  только экран и (мин-разрешение: 2.625dppx) {
    / * Здесь стили Retina * /
}
                                  

  @media
  только экран и (-webkit-min-device-pixel-ratio: 2),
  только экран и (min - moz-device-pixel-ratio: 2),
  только экран и (-o-min-device-pixel-ratio: 2/1),
  только экран и (min-device-pixel-ratio: 2),
  только экран и (минимальное разрешение: 192dpi),
  только экран и (минимальное разрешение: 2dppx) {
    / * Здесь стили Retina * /
}
                                  

  @media
  только экран и (-webkit-min-device-pixel-ratio: 3),
  только экран и (min - moz-device-pixel-ratio: 3),
  только экран и (-o-min-device-pixel-ratio: 3/1),
  только экран и (min-device-pixel-ratio: 3),
  только экран и (минимальное разрешение: 384dpi),
  только экран и (минимальное разрешение: 3dppx) {
    / * Здесь стили Retina * /
}