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 |
myresolutionis.ru
Основные разрешения (размеры) экранов для адаптивной верстки
В современном мире существует множество устройств. В таком многообразии предложений сложно делать выбор. Пользователи стараются выбрать устройство, в котором будут сочетаться наилучшие технические решения. Поэтому при разработке веб-сайтов и сайтов для мобильных устройств важно быть в курсе того, какие размеры и разрешения экранов используются чаще всего. Ведь адаптация сайта упрощает процесс восприятия информации и, в конечном итоге, доставляет удовольствие вашей аудитории.
Размер экрана, разрешение и область просмотра: что это значит?
Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 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 |
Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже
Оставить заявку
mob-vers.ru
Под какие разрешения рисовать адаптивный дизайн? — Хабр Q&A
При рисовании любого дизайна встает техническая задача — уместить элементы сайта в указанную ширину. Уместить в заданную ширину тяжелее, чем растянуть до заданной ширины. Растянуть легко на этапе верстки. Поэтому нужно ориентироваться на минимальную ширину в классе.1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).
2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.
3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.
В принципе, этого достаточно, чтобы верстальщик справился.
Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.
В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.
Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.
qna.habr.com
Что нужно знать дизайнеру о мобильных устройствах
Технические журналисты уже не первых год кричат про эру пост-PC, продажи компьютеров традиционных форм-факторов неумолимо падают, как и акции их производителей. Зато количество мобильных устройств, смартфонов или планшетов, неуклонно растет.
Для дизайнера это значит прежде всего то, что есть ли в ТЗ хоть что-то про мобильные устройства или нет, он должен нарисовать макет так, что бы с телефона (и, подавно, планшета) сайтом можно было пользоваться. И это значит не только то, что по кнопкам должно быть возможно попасть пальцем. В идеале, конечно, у сайта должна быть отдельная мобильная версия, но, как показывает наш опыт, большинство клиентов не хочет выделять на нее дополнительные средства, но непременно будут жаловаться, если у них что-нибудь не работает с его любимого яблочного дивайса.
Вспоминая те грабли, на которые наступали знакомые мне дизайнеры, первое, что вызывает проблемы с нарисованными ими макетами — это отсутствие точных представлений о том, сколько же пикселов влезет на экран с номинальным разрешением выше, чем у настольного 20’ монитора. Ну что же, ничего страшного, на это и был рассчитан маркетинг больших цифр. Эта статья поможет разобраться в сложившейся ситуации.
Речь идет об устройствах на Android и iOS, WP пока экзотика, и без опыта личного обращения я не возьмусь давать рекомендации.
Отображение неадаптированной страницы в мобильном браузере
Если в HTML документе отсутствуют метатеги, говорящие мобильному браузеру что-либо о том, в какой ширине отображать документ, то браузеры будут вести себя так, как будто ширина документа 980 пикселов. Это справедливо как для телефонов с шириной экрана в 320 пикселов, так и для 10-дюймовых таблеток, использующих Android и iOS и браузер на Webkit. Такой подход подразумевает, что сайты с минимальной шириной в 960 пикселов получат небольшие поля для удобства восприятия контента.
Если же минимальная ширина документа больше, то поведение браузеров начинает различаться. Safari в iPhone/iPad в большинстве случаев просто сожмет контент. В Android проявят себя DIP — density-independent pixels, подробнее о которых позже. Если ширина документа больше 980 и больше, чем ширина устройства в DIP, появится прокрутка право. Так, сайт с шириной содержимого в 1040 пикселов будет отображаться без горизонтальной прокрутки на iPhone и IPad (1024 пикселов), но с прокруткой на телефонах вроде galaxy S3 (физическое разрешение 1280х720) или планшете Nexus 7 (физическое разрешение 1280х800).
Какие стоит сделать выводы? Несмотря на обилие широкоформатных дисплеев в настольных ПК и ноутбуках, старая добрая сетка на 960 пикселов не утратила свою актуальность. Мобильные браузеры имеют так же свойство подгонять текстовые блоки в формат, удобно читаемый на устройстве, например, поджимать текст в узкий столбец на телефоне и увеличивать его шрифт. Это не получится, если содержащий блок текст жестко ограничен по высоте. На самом деле, вообще никогда не стоит делать сайт, где что-либо ограничено по высоте, особенно если планируются посетители с мобильных устройств. Еще один враг мобильных устройств, особенно — телефонов — это элементы с position: fixed. Например, модная ныне кнопка назад, настойчиво бегающая за пользователем по странице. Еще хуже — большие плашки, вроде фиксированной шапки. Такие элементы не только занимают полезную площадь на малом экране, но и остаются на прежнем месте при увеличении. Проблема характерна также для модальных окон. Если они отображаются посередине экрана, то с мобильника увеличение их содержимого требует изрядной ловкости. Использование попапов вроде “будь на связи с нами в социальных сетях!”, ведущих себя подобным образом — вообще лютое неуважение к пользователям мобильных устройств, потому что зачастую покинуть сайт проще, чем закрыть этот попап.
Рассмотрим на примере парочки сайтов.
Не смотря на то, что лента.ру имеет очень пристойную мобильную версию, автоматический переход на нее не производится. В настольной fixed-меню залезает на текст при автоматическом масштабировании. Перед пользователем встает выбор либо масштабировать руками, либо не полениться прописать m. в url.
РБК. Вообще у них тоже есть мобильная версия, но переход на нее осуществляется только с главной страницы. По прямой ссылке (из Google News, в частности) можно наблюдать это нечитабельное полотно. Задержится ли посетитель на таком сайте? Едва ли.
Суперканонический поехавший попап на РБК-стайл. Выдающийся пример того, как делать не надо.
Интан, который верстал угадайте кто. Я, разумеется, прекрасно понимал, почему нельзя так поступать с меню, но как-то не было настроения спорить. Задать вопрос вообще не в тему.
Еще одна штука, которая обычно не оправдывает затраты времени в настольном виде и вызывает проблемы в мобильном — это кастомные элементы форм. То, что средствами CSS они почти не настраиваются, получилось не просто потому, что консорциуму всемирной паутины было лень.
Например, вы нарисовали красивый выпадающий список. Допустим, в настольном браузере он похож на все остальное, от открывается по клику мыши и прокручивается ее колесиком. Но в мобильном работа с таким элементов у вас вызовет большие проблемы. Если бы select был стандартным, пользователю показали бы системное окно с барабаном/выпадающим списком, в зависимости от ОС.
А возможность прикрепить файл в iOS отсутствует как таковая. И если стандартный вид кнопки намекнет пользователю, что она отключена, то какая-нибудь яркая красивая кнопка будет вызывать ощущение того, что на вашем сайте что-то не работает.
Конечно, в идеале мобильное устройство должно быть определено, и для мобильных устройств скрипты, направленные на изменение стандартного интерфейса, не должны исполняться.
Еще одной неприятной особенностью мобильных браузеров является то, что в настоящее время они не кешируют подключаемые шрифты. Тот же PT Sans во всех начертаниях, подключенный с Google Web Fonts, грузится ощутимо долго. При этом едва ли он так уж ощутимо проигрывает встроенным Helvetica / Roboto. Хорошо подумайте, стоит ли лишнее время загрузки вашего кастомного шрифта.
Размеры и разрешения экранов мобильных устройств. Разница между физическим разрешением экрана и разрешением в мобильном браузере
В iPhone и iPad используется понятие точек — apple points. Разрешение iPhone вплоть до 5 модели — 320 на 480 точек. Что такое Retina Display? Retina Display использует двойную плотность пикселов, то есть на одну точкку приходится 4 физических пиксела. Так, у iPhone 4 при физическом разрешении экрана 640 на 960 пикселовв все же же 320 на 480 точек. Но при этом графика более детализирована за счет использования вдвое больших изображений в приложениях. Для iPhone 5 значение в точках увеличилось с 480 до 568. У iPad всех версий, включая Mini, оно неизменно — 1024х768.
По умолчанию в масштабе 1 к 1 стандартная графика в web (например, background-image) будет отображена в как-бы увеличенном вдвое виде, на 4 пиксела физического экрана будет растянут один пиксел растрового изображения. Как использовать графику высокого разрешения в такой ситуации мы рассмотрим в следующем разделе. Главное, что нужно помнить о разрешениях iOS устройств — не надо думать, что страницы в ретине и не-ретине имеют разную ширину. Нет, разница только в плотности пикселов, пропорции абсолютно те же.
В Android ситуация гораздо сложнее, точнее, многообразнее. В Android используется понятие different screen densities (DPI). Суть его в том, что при разных физических размерах дисплея и разрешающей способности, модель поведения по точкам отличается в зависимости от назначения устройства. аналогом Points служит вышеупомянутый DIP.
Плотность экрана — 1. В эту категорию входит множество устройств, такие как телефоны 320х480 (HTC Hero, LG Optimus One), 7-дюймовые таблетки 1024х600 (Samsung Galaxy Tab, Kindle Fire), 10-дюймовые таблетки (Asus Transformer, Acer A500, Galaxy Tab 10’1).
Плотность экрана 1,33 используется в 7-ми дюймовых планшетах вроде Nexus 7. Физическое разрешение — 1280х800, в DIP — 960х600.
Плотность экрана 1,5 — мобильные телефоны высокой ценовой категории 2011 года и средней 2012 года, 10-ти дюймовые планшеты с FullHD. Например, Nexus One 480×800 пикселов, 360х533* DIP, HTC One S — 540х960 пикселов, 360х640 DIP, и Asus Transformer Pad Infinity 1920×1200 пикселов, 1280х800 DIP.
*на Android Developers встречается 534, но измерение ширины браузера через JS показывает именно 533, соответственно и в медиазапросах стоит ориентироваться на эту цифру.
Плотность экрана 2 — телефоны высокой ценовой категории 2012 года и буквально пара планшетов. Например, HTC One X, Samsung Galaxy S3 — разрешение экрана 1280х720, размеры в DIP 360х640. Планшет Google Nexus 10 — разрешение 2560х1600 пикселов, 1280х800 DIP.
Плотность экрана 3 — флагманы 2013 года с FullHD дисплеем. При разрешении в 1920х1080 пикселов у них все те же 360х640 DIP.
При всем этом есть еще выбивающийся из колеи Google Nexus 4 c экраном в 1280х768 пикселов с плотностью 2 (384х640). В моделях с экранными клавишами 42DIP занимает панель для них, поэтому в моделях такого рода (Galaxy Nexus, Nexus 4, Sony Xperia Z) в портретном режиме портретное разрешение будет несколько меньше, и составит 598 точек.
Таким образом, у нас есть три разрешения для портрета — 320, 460 и редкое 384, и четыре c половиной ландшафтных — 480, 533, 568, 640 (598 с софт-клавишами).
У планшетов это портретные 600 и 800, и ландшафтные 960, 1024 и 1280.
Таблица ниже приводит большинство типовых разрешений популярных продуктов:
Как начать работу над макетом мобильного приложения?
Для начала, читайте гайдлайны. Приложения под разные платформы должны выглядеть по-разному. Вот, например, пройдя по ссылке можно сравнить типовые элементы различных ОС
Для работы над макетом приложения для iPhone создайте холст 640×1136 (960) и используйте размеры, кратные двум. Вся графика, все шрифты должны быть таковыми.
Определенную часть экрана в вашем будущем приложении могут занимать status bar с индикаторами сигнала, батареи и т.д. Это 20 точек в iOS и 25 DIP в Android. В Android телефонах с soft-клавишами и планшетах 48 DIP внизу экрана занимает плашка под них (Navigation Bar). При этом в неканоничных устройствах вроде планшетов Samsung из-за использования фирменной оболочки Navigation Bar и Status Bar совмещены.
Для приложения под телефоны на Android актуально брать хост не меньше 720х1280. Лучше сразу 1080х1960, в расчете на современные флагманы.
Для холста в 720х1280 размеры так же должны быть кратны двум, для 1080х1960 кратно трем. Использовать в качестве холста 480х800 или 640х960 — очень плохая идея.
В процессе работы над макетом нужно периодически уменьшать размеры окна графического редактора до примерных размеров реального устройства, а так же сохранять JPG и просматривать его на настоящем устройстве. Можно ли попасть пальцем в кнопку? Не слишком ли мелкий текст?
Использовав макет неподходящих размеров, вина за кривой вид приложения или его замыленную графику окажется полностью на вас.
В общем, будьте внимательны к деталям и помните — пикселы и точки/дипы — уже не одно и то же.
Оптимизация Web-графики для экранов высокой плотности
Итак, мы узнали о том, что существует несколько возможных вариантов плотности пикселов на дисплее. Соответственно, для избежания эффекта замыленной графики, так же известной как «эффект Playstation», нам необходимо либо использовать растровую графику большего разрешения, либо векторную графику, например, SVG.
При этом поддержка SVG пока весьма ограничена, и для обратной совместимости со старыми браузерами все равно придется использовать растр. Другой головной болью будет использование спрайтов — значения background-position нужно будет указывать в процентах, что потребует больших математических вычислений. Наименее сложным путем является использование нескольких вариантов одних и тех же изображений, через медиа-запрос, например -webkit-min-device-pixel-ratio: 2.
Как можно заметить, методика сама по себе очень простая и требует всего лишь наличие нескольких версий одной и той же картинки, если она использована в качестве background-image. Обычные же изображения при необходимости можно загружать вдвое большего, чем они должны быть размера и прописывать нужный на странице размер через атрибут style.
Обратной стороной является, собственно, больший вес картинок высокого разрешения. Тут нужно решить, что же важнее — контент, который пользователь увидит через больший из-за веса страницы промежуток времени, или оформление.
Голосов: 681 | Просмотров: 15756proweb63.ru
Размеры экранов / Habr
Планшеты и смартфоны оснащаются экранами с разными соотношениями сторон и разной плотностью пикселей, однако эти параметры редко указываются в технических характеристиках.Попробуем разобраться со всеми хитростями, связанными с этими параметрами. Начнём с планшетов.
Вот соотношение размеров экранов, использующихся в большинстве современных планшетов.
Обратите внимание, насколько экран 8″ с соотношением сторон 4:3 визуально больше широкого экрана 7″. А широкий экран 10.1″ на сантиметр меньше экрана 9.7″ по высоте.
Я свёл в таблицу параметры экранов, чаще всего использующихся в планшетах.
Текст на экранах с низким PPI (количеством точек на дюйм) читается не комфортно. Я бы не стал покупать планшет с экраном, имеющим PPI ниже 150. Даже 164 PPI экрана iPad mini многим кажутся недостаточными. Отлично воспринимаются экраны с PPI больше 200.
Для меня было большим открытием, что экран 9.7″ 1024×768 имеет даже меньшее PPI, чем экран 7″ 800×480.
В современных смартфонах используются экраны с разными соотношениями сторон (3:2, 5:3, 16:9), однако все они довольно близки. На картинке я проиллюстрировал соотношение размеров экранов с одинаковой диагональю и разными соотношениями сторон.
Таблица экранов, используемых в смартфонах, выглядит внушительно.
Как можно увидеть из таблицы, экранов с низким PPI совсем немного. Конечно, не стоит покупать смартфон с экраном, имеющим плотность пикселей ниже 170 PPI. Но опять же лучше, чтобы эта цифра была выше 200.
У подавляющего большинства экранов пиксель квадратный, поэтому соотношение сторон экрана можно вычислить, зная количество точек в ширину и в высоту. Есть лишь два исключения — «неправильные» экраны планшетов с прямоугольными пикселями — 800×480 (должно было бы быть 800×500) и 1024×600 (правильно было бы 1024×640).
Я потратил вечер на создание этих картинок и таблиц прежде всего для себя. Надеюсь, что они окажутся полезными и вам.
Таблицы в файле excel: nadezhin.ru/lj/ljfiles/screen.xls
upd.: Таблицы разрешений и ppi множества устройств: en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Калькулятор ppi: members.ping.de/~sven/dpi.html.
habr.com
Самые популярные разрешения экранов смартфонов в 2017 году
По материалам сайта Deviceatlas
Знание о том, какие разрешения экранов смартфонов сегодня популярнее всего, помогут оптимизировать ваш вебсайт с учётом разницы между различными устройствами. DeviceAtlas собрал самую свежую статистику использования девайсов, связанную с этим вопросом.
Новые разрешения экранов на рынке
В последние годы все флагманские устройства на Android OS имели разрешение Full HD (1080х1920) и QHD (1440х2560). В 2017 году на рынке появились несколько устройств с нестандартными разрешениями — в основном благодаря новому тренду на экраны edge-to-edge (на всю ширину устройства). В том числе:
- Samsung Galaxy Note 8: 1440 x 2960 пикселей
- Samsung Galaxy S8: 1440 x 2960 пикселей
- LG V30: 1440 x 2880 пикселей
- LG G6: 1440 x 2880 пикселей
- Sony Xperia XZ Premium: 3840 x 2160 пикселей
- iPhone X: 1125 x 2436 пикселей (только анонсирован)
Конечно, эти нестандартные разрешения ещё не вошли в нашу статистику. Но, так или иначе, мы можем ожидать, что стандарт S8 может стать одним из самых популярных в списке из-за огромной популярности семейства Galaxy S: так, предыдущий флагман — S7 — стал самым распространённым устройством на Android в мире.
Самое используемое разрешение экрана смартфона — 720х1280
По данным статистики трафика за июль-август 2017 года, самым популярным разрешением экрана на смартфонах стало соотношение 720×1280 пикселей, которое используется на большинстве устройств среднего и бюджетного класса. Это самое используемое разрешение в 11 странах из 20 проанализированных, в том числе в Индии, Италии и Испании. С небольшим отрывом за ним следует соотношение 750х1334, которое используется в популярных в США, Великобритании и Австралии моделях iPhone. Во Франции и Германии, в свою очередь, самым частым разрешением стало Full HD в смартфонах среднего и бюджетного классов.
В таблице представлены самые ходовые разрешения экранов смартфонов во всех 20 странах, участвовавших в исследовании.
Страна | Разрешение | Доля |
Аргентина | 720×1280 | 31.8% |
Австралия | 750×1334 | 32% |
Бразилия | 720×1280 | 31.6% |
Канада | 750×1334 | 28.1% |
Колумбия | 720×1280 | 29.2% |
Египет | 720×1280 | 29.7% |
Франция | 1080×1920 | 29% |
Германия | 1080×1920 | 22.1% |
Индия | 720×1280 | 38.5% |
Италия | 720×1280 | 24.1% |
Япония | 750×1334 | 38.9% |
Малайзия | 720×1280 | 28.5% |
Нигерия | 720×1280 | 30.4% |
Польша | 720×1280 | 30.4% |
Россия | 1440×2560 | 18.5% |
ЮАР | 720×1280 | 22% |
Испания | 720×1280 | 28.6% |
Швеция | 750×1334 | 30% |
Англия | 750×1334 | 29.2% |
США | 750×1334 | 30.7% |
На графиках ниже показана доля трафика, которая пришлась на долю смартфонов с разрешением экрана 720х1280 в июле-августе 2017 года в участвовавших в исследовании странах.
Full HD завоёвывает рынок, распространение QHD замедляется
Также мы проанализировали, насколько быстро выросло использование нескольких популярных разрешений за год — с 4 квартала 2016 года по 3 квартал 2017 года. Несмотря на активный рост ранее, сейчас распространение разрешения QHD (1440×2560) замедлилось.
Во Франции, Индии, Нигерии и США устройства с QHD даже потеряли долю рынка (-4% в последней стране). За последние 4 квартала устройства с FHD (1080×1920) выросли быстрее, прибавив 5-10% в Бразилии, Франции, Японии, Польше, Испании и США.
Доля трафика Full HD-устройств (1080х1920) за последние 4 квартала:
Доля трафика QHD-устройств (1440х2560) за последние 4 квартала:
moaction.mobi
Что значит параметр «разрешение экрана» в смартфоне
Основной параметр при выборе смартфона для подавляющего большинства, и это правильно, экран, который является не только «лицом» девайса, но и главным инструментом управления аппаратом. Давно прошли те времена, когда такой показатель в характеристиках дисплея, как «цветной», автоматически поднимал модель на верха и приравнивал к флагманам. Сейчас огромный выбор экранов современных смартфонов с легкостью может удовлетворить даже самого требовательного пользователя, к примеру бренда Хайскрин. В то же время, чтобы выбрать оптимально подходящий вариант необходимо очень хорошо ориентироваться в обилии технологий, терминов и т.д. Обязательно при выборе экрана необходимо учитывать значения его характеристик, которых, к слову, немало: разрешение, размеры, диагональ, показатель плотности пикселей, технология производства, тип конструкции тачскрина. Разберемся поближе, что значит «разрешение экрана» в смартфоне.
ЧТО ТАКОЕ РАЗРЕШЕНИЕ ЭКРАНА СМАРТФОНА
Большинство пользователей может ошибочно считать, что самое главное при выборе современного сенсорного смартфона – это размер экрана. Несомненно, сам размер дисплея и его диагональ играют не последнюю роль, но при выборе важно обращать внимание на его разрешение.
Разрешение экрана смартфона – это максимальное количество отдельных точек (пикселей) в ширину и высоту, которые могут отображаться на дисплее. Является одной из наиважнейших характеристик мобильного устройства, так как именно с помощью разрешения определяется фактическое рабочее пространство на экране телефона.
В сегодняшнюю эпоху технологий уже нет смысла покупать смартфон с разрешением ниже 1280×720 px (пикселей), ведь экран представляет собой самую главную деталь мобильного устройства – именно на него пользователь больше всего смотрит во время использования.
ДЛЯ ЧЕГО ЭТО НУЖНО И КАКУЮ ФУНКЦИЮ ВЫПОЛНЯЕТ
Именно от разрешения зависит качество картинки на экране. Большие габариты и малое разрешение сделают ее зернистой и фрагментированной. Недорогие смартфоны плохого качества оснащаются экранами с низким разрешением, где видны пиксели из-за чего картинка получается размытой, шрифт корявым. В качестве примера можно привести сочетание характеристик: диагональ – 5 дюймов, разрешение — 800х480 px. Соответственно, чем выше показатель разрешения, тем плотнее располагаются пиксели, изображение более четкое, однородное и плавное, экран вмещает больше информации. Full-HD экраны изготавливают из таких элементов, благодаря которым пиксели совершенно невозможно различить без специального оборудования, а изображение получается супер четким.
Игрушки и просмотр любимого фильма даже при условии большого экрана не принесут должного удовольствия, если дисплей будет иметь низкое разрешение. Но не стоит гнаться и за сверхвысоким разрешением, так как разницу между просто качественным и супер качественным изображением пользователю уловить практически невозможно, зато ценник на такой смартфон будет на порядок выше. Важно, чтобы разрешение не оказалось меньше рекомендуемого. Сильно расстроит приобретение девайса с плотностью пикселей меньше, чем было у предыдущей модели. Пользователю потребуется определенное время, чтобы привыкнуть к несовершенству, может даже возникнуть дискомфорт в глазах.
ОПТИМАЛЬНЫЕ СООТНОШЕНИЯ РАЗРЕШЕНИЯ СТОРОН МОБИЛЬНОГО ТЕЛЕФОНА
Современный рынок требует от производителей повышения на своих устройствах показателей плотности пикселей и разрешения. Рациональная необходимость во всех смартфонах высоких параметров экрана – очень спорный вопрос. Во-первых, если сравнивать два экрана одинаковой диагонали с небольшой разницей значений разрешений, то эффект от использования, с учетом комфортности для глаз, будет практически идентичный. Хотя не исключается тот факт, что в момент просмотра любых фотографий, видео, фильмов, разница качества может ощущаться. В идеальных условиях пользователь со 100% зрением может различить плотность пикселей до 350 DPI, в реальности 250 DPI более чем достаточно.
Теперь подробней о существующих, на сегодняшний день, разрешениях экрана смартфона:
- 240х320 px. Минимально существующие разрешение, которое поддерживает операционка Android. Устанавливается в очень дешевые телефоны и пользоваться ОС с таким дисплеем сплошная мука, поэтому специалисты не советуют их для ознакомления с Андроидом, иначе разочарование от низкого качества может отвернуть пользователя и от операционной системы, и от сенсорных устройств в принципе.
- 320х480 px.Такой вариант является мало-мальски приемлемым для смартфона. Данное разрешение экрана встречается у крайне бюджетных моделей телефонов с диагональную не более 3,5 дюймов. Не пользуются популярностью из-за излишней зернистости изображения. Такие смартфоны на рынке встречаются уже крайне редко.
- 480х800 px и 540х960 рх. Разрешение по сравнению с вышеупомянутыми немного более комфортно. Используется в смартфонах, также, бюджетного класса. Оптимальная диагональ экрана не должна превышать 3,5-4 дюйма, так как на больших дисплеях может «просочиться» предательское фрагментированное изображение.
- 720х1280 px. Самое популярное сегодня разрешение экрана, используемое производителями при выпуске смартфонов средней ценовой категории. В основном предназначено для телефонов с диагональю 4,5-5,5 дюймов. С данного размера стартуют так называемые HD-смартфоны. Разрешение обеспечивает хорошую детализацию изображения.
- 1080х1920 px. Это разрешение высокого уровня Full-HD. Обычно используется для девайсов с диагональю от 5 дюймов. Даже при условии использования экрана с диагональю 7 дюймов картинка будет оставаться четкой, не появится зернистости. Существует мнение, что использовать такое разрешение целесообразней при диагонали дисплея выше 6 дюймов, при меньшем значении человеческий глаз найти отличия между HD от FHD, в принципе, не в состоянии. Зато большое разрешение сильно отразится на стоимости матрицы экрана и всего устройства в целом, и заставит девайс потреблять больше электроэнергии.
- 1440х2560 px. 2K или QuadHD – довольно модное сегодня разрешение и не распространённое. Разбирающиеся граждане в замешательстве от явного излишества, помещенного в компактный девайс, в котором нет необходимости даже планшету с диагональю 7 дюймов. Увеличение плотности размещения пикселей на один дюйм до невероятных высот не так уж и ощутимы человеческим глазом, зато это хорошо почувствует батарея и быстродействие смартфона.
КОМПРОМИССЫ И ВЫВОДЫ
Большой размер экрана закономерно предполагает большой размер всего смартфона. Это вызывает дискомфорт в отношении хранения в небольших карманах и при использовании одной рукой. При условии большого дисплея и маленького разрешения пострадает качество картинки. Если дисплей будет маленьким, а разрешение высоким все подробности на экране станут мелковатыми – при элементарном выборе определенной иконки пользователь часто будет попадать «не туда».
В условиях сегодняшних потребностей пользователя наиболее актуальным при выборе нового смартфона средней ценовой категории будет устройство с диагональю в пределах 4.5″- 6.0″ дюймов с разрешением 720х1280 px или с разрешением 1080х1920 px.
Магазин мобильных телефонов
Каталог смартфонов Highscreen
hs-store.ru