- Популярные разрешения экранов: основы адаптивной верстки
- Размер экрана, разрешение и область просмотра: что это значит?
- Отзывчивый дизайн
- Самые популярные разрешения экрана
- Устройства Apple
- Устройства Android
- Все о разрешении экрана смартфона
- Что такое разрешение экрана и зачем нужно
- Разрешение экранов популярных устройств
- Для устройств Apple
- Для устройств Android
- Как узнать разрешение экрана на телефоне
- Можно ли изменить разрешение
Популярные разрешения экранов: основы адаптивной верстки
В современном мире существует множество устройств. В таком многообразии предложений сложно делать выбор. Пользователи стараются выбрать устройство, в котором будут сочетаться наилучшие технические решения. Поэтому при разработке веб-сайтов и сайтов для мобильных устройств важно быть в курсе того, какие размеры и разрешения экранов используются чаще всего. Ведь адаптация сайта упрощает процесс восприятия информации и, в конечном итоге, доставляет удовольствие вашей аудитории.
Размер экрана, разрешение и область просмотра: что это значит?
Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 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 |
Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже
Источник
Все о разрешении экрана смартфона
Изучая параметры смартфона в сервисе Яндекс.Маркет или на сайте 4pda.ru, в разделе «Экран» пользователь видит строку «Разрешение» и 2 перемноженных числа. Эта статья расскажет о том, что такое разрешение экрана в смартфоне, зачем оно нужно, каким бывает на разных устройствах, а также о том, можно ли изменить этот параметр.
Что такое разрешение экрана и зачем нужно
Эта величина показывает сколько пикселей может поместиться на экране.
Чем больше значение, тем лучше будет отображаться изображение – не будет зернистости (как на кнопочных телефонах), буквы будут аккуратными, без «зазубрин», а в рабочем пространстве поместится больше элементов. Поэтому рекомендуется покупать устройства с разрешением не ниже 1280х720.
Разрешение экранов популярных устройств
В зависимости от производителя, оно может меняться. Компании, выпускающие смартфоны с ОС Android используют стандартные значения:
- 720х1280 – для бюджетных смартфонов;
- 1080х1920 – для смартфонов средней ценовой категории;
- 2560×1440 – флагманские модели.
Для устройств Apple
| Модель iPhone | Диагональ, дюйм | Разрешение, пиксели |
| 4,4S | 3,5 | 640×960 |
| 5, 5C, 5S | 4 | 640×1136 |
| 6, 6S | 4.7 | 750×1334 |
| 6+, 6S+ | 5.5 | 1080×1920 |
| 7, 8 | 4.7 | 750×1334 |
| 7+, 8+ | 5.5 | 1080×1920 |
| X | 5.8 | 1125×2436 |
| SE | 4 | 640×1136 |
Для устройств Android
| Модель | Диагональ, дюйм | Разрешение | |
| ASUS | |||
| Zenfone 2 Lazer ZE500KL | 4,99 | 720×1280 | |
| Zenfone 4 A450CG | 4,4 | 480×800 | |
| HTC | |||
| Desire 600 | 4.45 | 540×960 | |
| Desire C | 3.52 | 320×480 | |
| Desire SV | 4.31 | 480×800 | |
| Desire V | 4,1 | ||
| Desire X | 4,1 | ||
| One | 4.8 | 1080×1920 | |
| One 32Gb | 4.6 | ||
| One S , | 4.2 | 540×960 | |
| One SV | 4.2 | 480×800 | |
| One X, X+ | 4.8 | 720×1280 | |
| Windows Phone 8s | 4.1 | 480×800 | |
| Windows Phone 8x | 4.2 | 720×1280 | |
| Huawei | |||
| Ascend G630 | 5,1 | 720×1280 | |
| Honor 5X | 5.4 | 1080×1920 | |
| Honor 6, 7 | 5.1 | 1080×1920 | |
| Lenovo | |||
| IdeaPhone P770 | 4.6 | 540×960 | |
| IdeaPhone S720 | |||
| K900 | 5.4 | 1080×1920 | |
| P70, S60 | 5.1 | 720×1280 | |
| Vibe Shot | 5.2 | 1080×1920 | |
| LG | |||
| G2 | 5.2 | 1080×1920 | |
| Nexus 4 | 4.8 | 768×1280 | |
| Nexus 5 | 4.97 | 1080×1920 | |
| Optimus 4X HD | 4.71 | 720×1280 | |
| Optimus G | 4.71 | 768×1280 | |
| Otimus G Pro | 5.51 | 1080×1920 | |
| Optimus L5 | 4,1 | 320×480 | |
| Optimus L5 II Dual | 4,1 | 480×800 | |
| Optimus L7 II Dual | 4.4 | ||
| Optimus L7 | 4.4 | ||
| Optimus L9 | 4.6 | 540×960 | |
| Samsung | |||
| Activ S | 4.75 | 720×1280 | |
| Galaxy A5 | 5,1 | 720×1280 | |
| Galaxy A5 2016 | 5.1 | 1080×1920 | |
| Galaxy Mega 6.3 | 6.4 | 720×1280 | |
| Galaxy Nexus | 4.7 | 720×1280 | |
| Galaxy Note | 5.4 | 800×1280 | |
| Galaxy Note 2 | 5.6 | 720×1280 | |
| Galaxy S Duos | 4,1 | 480×800 | |
| Galaxy S2, S2+ | 4.4 | 480×800 | |
| Galaxy S3 | 4.7 | 720×1280 | |
| Galaxy S3 Mini | 4,1 | 480×800 | |
| Galaxy S4 | 5,1 | 1080×1920 | |
| Galaxy S4 Mini | 4,2 | 540×960 | |
| Galaxy S4 Mini, S4 Zoom | 4.1 | 540×960 | |
| Galaxy S5 | 5.2 | 1080×1920 | |
| Galaxy S6 | 5.2 | 1440×2560 | |
| Galaxy Win | 4.6 | 480×800 | |
| Sony Xperia | |||
| Acro S | 4.35 | 720×1280 | |
| E Dual, Go | 3.51 | 320×480 | |
| Ion | 4.56 | 720×1280 | |
| J | 4,1 | 480×854 | |
| L | 4.35 | ||
| Miro | 3.6 | 320×480 | |
| P | 4,1 | 540×960 | |
| S | 4.4 | 720×1280 | |
| Sola | 3.75 | 480×854 | |
| SP | 4.62 | 720×1280 | |
| Tipo | 3.21 | 320×480 | |
| TX | 4.57 | 720×1280 | |
| V | 4.33 | ||
| Z, Z1 | 5,05 | 1080×1920 | |
| Z1 Compact | 4.33 | 720×1280 | |
| Z2 | 5.24 | 1080×1920 | |
| ZL | 5,1 | ||
| ZR LTE | 4.52 | 720×1280 | |
| Xiaomi Redmi | |||
| 3, 3S | 5 | 720×1280 | |
| 4, 4А, 4X, 5А | 5 | 720×1280 | |
| 4 Pro | 5 | 1080х1920 | |
| 5 | 5,7 | 720х1440 | |
| 6, 6А, 7А | 5,45 | ||
| 5+ | 5,99 | 1080х2160 | |
| 6 Pro | 5,84 | 1080×2280 | |
| 7 | 6,3 | 720х1520 | |
| Go | 5 | 720х1080 | |
| S2 | 5,99 | 720х1440 | |
| K20 Pro | 6,39 | 1080×2340 | |
| Y3 | 6,25 | 720×1560 | |
| Xiaomi Redmi Note | |||
| 2, 3, 4, 5A Prime | 5,5 | 1080×1920 | |
| 5 | 5,99 | 1080х2160 | |
| 6 Pro | 6,25 | 1080×2280 | |
| 7, 7 Pro | 6,3 | 1080×2340 | |
| 8 | 6,4 | ||
| 8 Pro | 6,53 | ||
| Xiaomi Mi | |||
| 4 | 5 | 1080х1920 | |
| 5, 5S, 6 | 5,15 | ||
| 6+ | 5,7 | ||
| 5X | 5,5 | ||
| 7 | 5,65 | 1080×2160 | |
| 7+ | 6 | ||
| 8, 8 Pro | 6,2 | 1080×2248 | |
| 8 Lite | 6,25 | 1080×2280 | |
| 9 | Т, Lite, Pro, T Pro, Explorer | 6,39 | 1080х2340 |
| SE | 5,98 | ||
| A1 | 5,5 | 1080×1920 | |
| A2, Mix 2 | 5,99 | 1080х2160 | |
| A2 Lite | 5,84 | 1080×2280 | |
| A3, Mix 3 | 6,4 | 1080×2340 | |
| A3 Lite | 6 | 720×1560 | |
| Play | 5,85 | 1080×2280 | |
| Max | 6,9 | 1080 x 2160 | |
Как узнать разрешение экрана на телефоне
Способов существует 3:
- Открыть Яндекс.Маркет, ввести название модели в поисковую строку, выбрать подходящее устройство и перейти в подраздел «Характеристики».
- Ввести в поисковой системе запрос вида «Модель_телефона характеристики».
- Открыть «Настройки» на смартфоне и перейти в подраздел «О телефоне».
Можно ли изменить разрешение
Для процедуры потребуются: рут-права, файловый менеджер Root Explorer и текстовый редактор. Порядок действий следующий:
- Запустить Root Explorer и в папке System (раздел root) найти файл prop.
- Открыть документ в текстовом редакторе и найти строчку ro.sf.lcd_density.
- Увеличить значение на 10 и сохранить изменения.
- Перезагрузить смартфон.
- Повторять шаги № 3 и 4 до тех пор, пока качество изображения не станет приемлемым.
Подводя итог, можно сказать, что разрешение это важная характеристика дисплея. От нее зависит комфорт от пользования устройством, качество воспроизводимого видео и графики в играх.
Источник