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

Содержание

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

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

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

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

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

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

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

УстройствоДиагональ (в дюймах)Разрешение (в пикселях)
Стационарные телефоны, факсы1.2 — 2.5
Телефоны, смартчасы1.3 — 2.5
mp3-плееры2 — 3 240×320 … 240×432
Смартфоны2.8 — 6 240×320 … 2560×1440
Электронные книги6 — 8 600×800 … 758×1024
Планшеты7 — 13.3 800×480 … 2560×1600
Ноутбуки10.1 — 18.41280×800 … 3840×2160
Мониторы (настольные компьютеры)15 — 551024×768 … 3840×2160
Телевизоры (портативные)11 — 171024×768 . .. 1366×768
Телевизоры19 — 1001280×720 … 7680×4320

При указании разрешений экранов телевизоров используются обозначения: HD Ready, Full HD, UHD, QHD, WQHD, 4K, 8K, 10K. На устаревших моделях можно встретить маркировки: 480p, 720p, 1080p.

Для справки: 1 дюйм ~ 2.54 см. Обозначение дюймов на коробках бытовой техники и электроники: inch или ".

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

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

Apple iPhone 4/4S3640×960
Apple iPhone 54640×1136
Apple iPhone 5C/5S4640×1136
Apple iPhone 64.71334×750
Apple iPhone 6 Plus5.51920×1080
Apple iPhone 6S4.71334×750
Apple iPhone 6S Plus5.51920×1080
Apple iPhone 74. 71334×750
Apple iPhone 7 Plus5.51920×1080
Apple iPhone SE41136×640
ASUS Zenfone 2 Lazer ZE500KL51280×720
BlackBerry Bold 99002.8640×480
BlackBerry Z104.2768×1280
Fly IQ451 Vista5720×1280
HTC Desire 6004.5540×960
HTC Desire C3.5320×480
HTC Desire SV4.3480×800
HTC Desire V4480×800
HTC Desire X4480×800
HTC One4.71080×1920
HTC One 32Gb4.71080×1920
HTC One S4.3540×960
HTC One SV4.3480×800
HTC One X4.7720×1280
HTC One X+4.7720×1280
HTC Windows Phone 8s4480×800
HTC Windows Phone 8x4.3720×1280
Huawei Ascend G6305720×1280
Huawei Honor 5X5.51920×1080
Huawei Honor 651080×1920
Huawei Honor 75.21920×1080
Jiayu G6 Advanced5.71080×1920
Lenovo IdeaPhone P7704.5540×960
Lenovo IdeaPhone S7204.5540×960
Lenovo K9005.51080×1920
Lenovo P7051280×720
Lenovo S6051280×720
Lenovo Vibe Shot51920×1080
LG G2 D8025.21080×1920
LG Nexus 4 16Gb4.7768×1280
LG Nexus 54.951080×1920
LG Optimus 4X HD4.7720×1280
LG Optimus G4.7768×1280
LG Optimus G Pro E9885.51080×1920
LG Optimus L54320×480
LG Optimus L5 II Dual E4554480×800
LG Optimus L7 II Dual P7154.3480×800
LG Optimus L7 P7054.3480×800
LG Optimus L94.7540×960
Meizu M2 Note 16Gb5.51920×1080
Nokia 808 PureView4360×640
Nokia Asha 3113240×400
Nokia Lumia 5204480×800
Nokia Lumia 6203.8480×800
Nokia Lumia 7204.3480×800
Nokia Lumia 8003.7480×800
Nokia Lumia 8204.3480×800
Nokia Lumia 9204.5768×1280
Nokia Lumia 9254.5768×1280
Nokia X Dual Sim4480×800
Philips Xenium W7324.3480×800
Philips Xenium W8324.5540×960
Samsung Ativ S 16Gb GT-I87504.8720×1280
Samsung Galaxy A551280×720
Samsung Galaxy A5 20165.21920×1080
Samsung Galaxy Ace Duos GT-S68023.5320×480
Samsung Galaxy Ace GT-S58303.5320×480
Samsung Galaxy Ace II GT-I81603.8480×800
Samsung Galaxy Grand GT-I90825480×800
Samsung Galaxy Mega 5.8 GT-I91525.8540×960
Samsung Galaxy Mega 6.3 8Gb GT-I92006.3720×1280
Samsung Galaxy Nexus GT-I92504.65720×1280
Samsung Galaxy Note GT-N70005.3800×1280
Samsung Galaxy Note II GT-N71005.55720×1280
Samsung Galaxy S Duos GT-S75624480×800
Samsung Galaxy S II GT-I91004.27480×800
Samsung Galaxy S II Plus GT-I91054.3480×800
Samsung Galaxy S III GT-I9300 16Gb4.8720×1280
Samsung Galaxy S III mini GT-I81904480×800
Samsung Galaxy S4 GT-I950051080×1920
Samsung Galaxy S4 GT-I950551080×1920
Samsung Galaxy S4 mini GT-I91904540×960
Samsung Galaxy S4 mini GT-I91954.27540×960
Samsung Galaxy S4 Zoom SM-C1014.3540×960
Samsung Galaxy S55.11080×1920
Samsung Galaxy S6 SM-G920F5.12560×1440
Samsung Galaxy Win GT-I85524.7480×800
Samsung Galaxy Y Duos GT-S61023.14240×320
Samsung Galaxy Y GT-S53603240×320
Sony Xperia acro S4.3720×1280
Sony Xperia E dual3.5320×480
Sony Xperia go3.5320×480
Sony Xperia ion4.55720×1280
Sony Xperia J4480×854
Sony Xperia L4.3480×854
Sony Xperia miro3.5320×480
Sony Xperia P4540×960
Sony Xperia S4.3720×1280
Sony Xperia sola3.7480×854
Sony Xperia SP4.6720×1280
Sony Xperia tipo3.2320×480
Sony Xperia TX4.55720×1280
Sony Xperia V4.3720×1280
Sony Xperia Z51080×1920
Sony Xperia Z151080×1920
Sony Xperia Z1 Compact4.3720×1280
Sony Xperia Z25.21080×1920
Sony Xperia ZL51080×1920
Sony Xperia ZR LTE (C5503)4.55720×1280
YotaPhone — цвет.4720×1280
YotaPhone — чб4360×640

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

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

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

Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 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

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

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

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

§ 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-пунктовый текст на экране Макинтоша 12-пунктовый текст на экране PC

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

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

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

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

Графический интерфейс пользователя (GUI — Graphical user interface) является лицом приложения. Поэтому очень важно разобраться со способами, которыми в Android формируется и управляется GUI.
Для начала разберемся с базовыми понятиями такими как размер экрана, размер изображения экрана и разрешение экрана.

РАЗМЕР ЭКРАНА

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

Размер экрана – это размер экрана по диагонали в дюймах (inches).

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




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


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

Размер изображения экрана – это количество пикселей по ширине и высоте экрана.

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

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

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


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


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


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

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

Pixel Density (Pixels Per Inch/PPI)

Pixels Per Square Inch

1ppi 1
2ppi 4 (double ppi = quadruple pixel count)
4ppi 16
8ppi 64
218ppi (Galaxy S II) 47524
306ppi (Galaxy S III) 93636
326ppi (iPhone 5 Retina Display) 106276
441ppi (Galaxy S4) 194481
468ppi (HTC One) 219024

Поясним это следующим примером. И сразу же напомню что пиксель – это квадратик. Предположим что у нас есть экран с ФИЗИЧЕСКИМ размером в один дюйм в ширину и один дюйм в высоту. И дальше предположим что сперва у нас этот этот экран может отображать только один пиксел, размер которого тоже равен один на один дюйм. То есть плотность пикселей PPI на нашем гипотетическом экране равна 1PPI. Далее, совершив нечеловеческий технологический прыжок, мы смогли на один дюйм уложить два пикселя! То есть увеличил плотность до 2PPI. Это означает, что теперь наш экран физическим размером один на один дюйм может отображать ЧЕТЫРЕ пикселя, при плотности 2PPI. Прогресс не стоит на месте и мы опять увеличили плотность до 4PPI, то есть в один дюйм мы можем уже уложить четыре пикселя. Это означает что наш монитор физическим размером один на один дюйм уже может отображать 16 пикселей. Ну и дальше, о чудо, 8PPI. И наш монитор с физическим размером один на один дюйм уже может отобразить 64 пикселя!

Чтобы вычислить количество пикселей приходящихся на дюйм вспоминаем школу – квадрат гипотенузы равен сумме квадратов катетов (пифагоровы штаны во все стороны равны).
Кому лень вспоминать, вот ссылка на PPI калькулятор в интернет. Правда на сколько долго эта ссылка проживет я не знаю. Или ссылка на формулы PPI расчета в википедии. Эта я думаю проживет подольше.
Приведу формулы расчета здесь тоже:
1. Рассчитать диагональное разрешение в пикселях с использованием теоремы Пифагора:

2. Вычислить PPI:


Например, возьмем реальный телефон HTC Desire S и рассчитаем для него PPI.

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

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

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

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

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

iPhone 4

HTC Desire 200

Размер экрана

3.5”

3.5”

Размер изображения

640×960

320×480

PPI

329

165

Как говорится результат на лицо. Только не кидайте в меня камнями! Я не  рекламирую iPhone! Это просто пример.

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

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

WXGA определяет диапазон разрешений с шириной от 1280 до 1366 пикселей и высотой от 720 до 800 пикселей.

См. также

Wikimedia Foundation. 2010.

  • Разрешение на убийство
  • Разрешимая теория

Полезное


Смотреть что такое «Разрешение экрана» в других словарях:

  • Разрешение экрана — Адресуемое количество пикселей (элементов изображения). Для ЖК панели разрешение является рабочим режимом, при котором достигается наилучшее качество изображения. Если видеорежим компьютера не совпадает с реальным разрешением панели, то монитор… …   Глоссарий терминов бытовой и компьютерной техники Samsung

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

  • графическое разрешение — Разрешение экрана, характеризующее степень детализации изображения. Чем выше разрешение экрана, тем лучше детализация. [http://www.morepc.ru/dict/] Тематики информационные технологии в целом EN graphics resolution …   Справочник технического переводчика

  • Соотношение сторон экрана — или Отношение ширины кадра к высоте (англ. aspect ratio) понятие в фотографии, кинематографе и в телевидении. В кинематографе применяется обозначение соотношения сторон экрана, отличное[1] от фотографии и телевидения, в которых соотношение… …   Википедия

  • Съёмка с экрана — У этого термина существуют и другие значения, см. Съёмка. У этого термина существуют и другие значения, см. Пересъёмка. Съёмка с экрана, пересъёмка  процесс копирования кинематографического, телевизионного, реже фотографического изображения …   Википедия

  • 4K (разрешение) — Сравнение разрешающей способности 4K, 2K и HDTV 4K  обозначение разрешающей способности в цифровом кинематографе и …   Википедия

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

  • ПРЕДЕЛЬНОЕ РАЗРЕШЕНИЕ В ТЕЛЕВИДЕНИИ — измеряется горизонтальным (строчным) разрешением, обычно выраженным в максимальном числе линий по высоте изображения (экрана), различаемых на тестовой таблице, использующей стандарт IEEE 208/1960 или любой эквивалент этого стандарта …   Словарь понятий и терминов, сформулированных в нормативных документах российского законодательства

  • Casio Cassiopeia — Бесклавиатурный КПК Casio Cassiopeia E 125 Casio Cassiopeia  торговая марка компании Casio, под которой выпускался ряд карманных персональных компьютеров (К …   Википедия

  • iPad — Интернет планшет производства компании Apple Интернет планшет, представленный компанией Apple в январе 2010 года. Вторая версия планшета была представлена в марте 2011 года, третья версия (The New iPad) в марте 2012, четвертая (iPad с дисплеем… …   Энциклопедия ньюсмейкеров

Книги

  • Технология. Технический труд. 5 класс. Электронное сопровождение к УМК (CDpc), Глозман Евгений Самуилович, Ставрова О.Б., Глозман Александр Евгеньевич, Хотунцев Юрий Леонтьевич. Электронное сопровождение к учебно-методическому комплекту «Технология. Технический труд» составлено в соответствии с требованиями федерального компонента государственного стандарта основного… Подробнее  Купить за 641 руб
  • Технология. Технический труд. 7 класс. Электронное сопровождение к УМК (CDpc), Глозман Евгений Самуилович, Ставрова О.Б., Глозман Александр Евгеньевич, Хотунцев Юрий Леонтьевич, Электов Александр Анатольевич. Электронное сопровождение к учебно-методическому комплекту «Технология. Технический труд» составлено в соответствии с требованиями федерального компонента государственного стандарта основного… Подробнее  Купить за 543 руб
  • Технология. Технический труд. 6 класс. Электронное сопровождение к УМК (CDpc), Глозман Евгений Самуилович, Ставрова О.Б., Глозман Александр Евгеньевич, Хотунцев Юрий Леонтьевич. Электронное сопровождение к учебно-методическому комплекту «Технология. Технический труд» составлено в соответствии с требованиями федерального компонента государственного стандарта основного… Подробнее  Купить за 543 руб
Другие книги по запросу «Разрешение экрана» >>

Как узнать разрешение экрана на 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 пикселей, оно же максимальное.

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

Диагональ монитора (дюймы)Родное разрешениеШирокоформатный
14-151024 x 768
17-191280 x 1024
20-231600 x 1200
24 +1900 x 1200
17-181280 x 800+
191440 x 900+
20-231680 x 1050+
24-291920 x 1080 до 1920 х 1200+
30 +1920 x 1080 до 2560 х 1600+

 

Диагональ экрана ноутбука (дюймы)Родное разрешениеШирокоформатный
13-151400 x 1050
13-151280 x 800+
171680 x 1050+
Экран планшета1366 x 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 указывает странице на соответствие ширине экрана в независимых от устройства пикселях. Это позволяет переформатировать содержимое страницы для соответствия разным размерам экрана, независимо от того, отображается ли она на маленьком мобильном телефоне или на большом настольном мониторе.

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

Имущество Описание
ширина Ширина виртуального окна просмотра устройства.
ширина устройства Физическая ширина экрана устройства.
высота Высота « виртуального окна просмотра » устройства.
высота устройства Физическая высота экрана устройства.
начальная Начальный масштаб при посещении страницы. 1.0 не увеличивает масштаб.
минимальный Минимальное значение, которое посетитель может увеличить на странице. 1.0 не увеличивает масштаб.
максимальный масштаб Максимальное значение, которое посетитель может увеличить на странице. 1.0 не увеличивает масштаб.
с возможностью масштабирования пользователем Позволяет устройству увеличивать и уменьшать масштаб.Значения да или нет.

Устройства Apple

Устройство Размер пикселя Окно просмотра
iPhone
iPhone 12 Pro Max 2778 x 1284 428 x 926
iPhone 12 Pro 2532 х 1170 390 х 844
iPhone 12 2532 х 1170 414 x 895
iPhone 11 1792 x 828 390 х 844
iPhone XR 828 x 1792 414 x 896
iPhone XS 1125 x 2436 375 х 812
iPhone XS Max 1242 x 2688 414 x 896
iPhone X 1125 x 2436 375 х 812
iPhone 8 Plus 1080 x 1920 414 x 736
iPhone 8 750 x 1334 375 х 667
iPhone 7 Plus 1080 x 1920 414 x 736
iPhone 7 750 x 1334 375 х 667
iPhone 6 Plus / 6S Plus 1080 x 1920 414 x 736
iPhone 6 / 6S 750 x 1334 375 х 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 третьего и четвертого поколений 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

Устройство Размер пикселя Окно просмотра
Телефон Android
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
Один плюс 3 1080 x 1920 480 x 853
Samsung Галактика S9 + 1440 x 2960 360 x 740
Samsung Galaxy S9 1440 x 2960 360 x 740
Samsung Галактика S8 + 1440 x 2960 360 x 740
Samsung Галактика S8 1440 x 2960 360 x 740
Samsung Galaxy S7 край 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

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

  • Использование мобильных устройств стремительно растет
  • 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), что делает их подходящими для европейского стандарта.

Приблизительное соотношение 4×3
Размер Размеры пикселей пикселей на дюйм Площадь Образец устройства МП
13,3 дюйма 271 x 203 мм, 10,67 x 8,0 дюйма 1600 × 1200 150 85,3 Sony DPT-S1 1.9
2200 x 1650 207 ДАСУНГ 3,6
267 x 210 мм, 10,5 x 8,27 дюйма 86,8 BOOX MAX2 Pro
12,9 дюйма 264 x 198 мм, 10,4 x 7,8 дюйма 2732 x 2048 264 81 iPad Pro 5,6
11,0 « 9,0 x 6,3 дюйма (1,43: 1) 2388 x 1668 264 56.7 iPad Pro 2018 4,0
10,9 дюйма 8,9 x 6,2 дюйма (1,43: 1) 2360 x 1640 264 55,5 iPad Air 2020 3,9
10,5 дюйма 213 x 160 мм, 8,4 x 6,3 дюйма 2224 x 1668 264 52,9 iPad Air 2019 3,7
10,3 дюйма 210 x 157 мм, 8,26 x 6,2 дюйма 1872 x 1404 226 51.2 reMarkable 2,6
10,2 дюйма 207 x 155 мм, 8,15 x 6,1 дюйма 2560 x 1800 300 49,7 пикселей C 4,6
1280 × 1024 158 Считыватель цифровых данных IRex 1,3
2160 x 1620 264 iPad 2019 3,5
9,7 дюйма 203 x 140 мм, 8,0 дюймов x 5.5 « 1600 × 1200 200 44 E Чернильный дисплей 1,9
2400 x 1650 300 4,0
1200 × 825 150 1,0
197 × 148 мм, 7,8 дюйма x 5,8 дюйма 2048 × 1536 264 45,2 iPad Air 1 и 2 3,1
1024 × 768 132 iPad 1 и 2 0.8
9,0 « 183 × 137 мм, 7,2 × 5,4 дюйма 1024 × 768 142 38,9 M-Читатель 9
8,1 « 6,46 x 4,845 дюйма 1024 x 768 158 31,2 iRex iLiad
8,0 « 163 x 122 мм, 6,4 x 4,8 дюйма 1600 × 1200 250 30,7 PocketBook InkPad 1,9
1024 x 768 160 ИКАРУС Иллюмина XL 0.8
1920 × 1440 300 Кобо Форма 2,8
7,9 дюйма 160 x 119 мм, 6,3 дюйма x 4,7 дюйма 1024 × 768 163 29,6 IPad mini 0,8
2048 x 1576 326 IPad mini retina 3,2
7,8 дюйма 158,5 x 118,9 мм, 6,24 дюйма x 4,68 дюйма 1872 x 1404 300 29.2 Aura ONE 2,6
468 x 624 100 BOOX Nova 3 Color 0,3
7,0 « 5,6 x 4,2 дюйма 1680 x 1260 300 23,5 Разжечь Оазис 7 2,1
6,8 дюйма 5,0 x 3,7 дюйма 1648 x 1236 300 18,5 New Paperwhite 2,0
6.8 « 137 x 104 мм, 5,4 x 4,1 дюйма 1440 × 1080 265 22,2 Аура HD 1,6
6,0 « 120 x 89 мм, 4,7 x 3,5 дюйма 1448 × 1072 300 16,9 Kindle Voyage 1,5
122 x 91 мм, 4,8 x 3,6 дюйма 1024 × 768 213 17,3 Boyue T61 0,8
800 × 600 167 Матрица для чтения электронных книг 0.5
5,5 дюйма 4,6 дюйма x 3,1 дюйма 480 x 320 104 14,3 eBookwise-1150 0,15
5,0 « 101 x 76 мм, 4,0 «x 3,0» 800 x 600 200 12 Кобо Мини 0,5
640 x 480 160 JetBook 0,3
4,3 дюйма 88 x 66 мм, 3,46 x 2.60 « 800 x 600 232 9 Pyrus mini 0,5
3,5 дюйма 71 x 53 мм, 2,80 x 2,10 дюйма 320 x 240 114 5,9 0,1
2,8 дюйма 2,25 x 1,75 дюйма 600 x 480 270 3,9 Light Phone II 0,3
2,7 дюйма 2,16 x 1,62 дюйма 800 x 600 370 3.5 0,48
2,4 « 1,92 x 1,44 дюйма 320 x 240 167 2,8 Sansa Fuze 0,1

[править] Соотношение 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 могут отличаться для горизонтального и вертикального, и может отображаться среднее значение.

Приблизительное соотношение 16×9 или 16×10
Размер Размеры пикселей пикселей на дюйм Площадь Образец устройства МП
12.5 « 10,9 x 6,13 дюйма 2560 x 1440 236 66,8 3,7
11,6 дюйма 10,1 x 5,68 дюйма 1366 x 768 135 57,4 Acer R11 1,0
10,8 дюйма 9,4 x 5,3 дюйма 2560 x 1600 272 50,0 Yoga Book C930 Ноутбук 4,1
1920 x 1080 204 2.1
10,6 дюйма 9,25 x 5,2 дюйма 1920 x 1080 207 48,1 Поверхность 2 2,1
1366 x 768 148 Поверхность RT 1,0
10,5 дюйма 8,92 x 5,57 дюйма 2560 x 1600 287 49,7 Galaxy Tab S5e 4,1
10,1 дюйма 214 х 135 мм, 8.53 x 5,33 дюйма 1280 x 800 150 45,5 Motorola XOOM 1,0
8,6 x 5,37 дюйма 2560 x 1600 298 46,2 Sony Xperia Z4 4,1
1920 x 1200 223 Lenovo Tab 4 10 Plus 2,3
220 x 132 мм, 8,68 x 5,1 дюйма 1024 x 600 118 44,3 0.6
223 x 126 мм, 8,8 x 4,95 дюйма 1366 x 768 155 43,6 Asus Трансформер T100TA 1,0
8,9 дюйма 7,8 x 4,4 дюйма 2560 x 1600 339 34,3 Kindle Fire HDX 4,1
1920 x 1200 255 Kindle Fire HD 2,3
8,4 дюйма 7,13 дюйма x 4.46 « 2560 x 1600 359 31,8 Huawei M5 8.4 « 4,1
1920 x 1200 269 Galaxy Tab A 8,4 дюйма 2,3
8 дюймов 7 дюймов x 4 дюйма 1920 x 1200 280 28,0 Lenovo Tab 4 8 Plus 2,3
7,1 дюйма 15,6 х 9,15 мм; 6,14 x 3,6 дюйма 1024 × 600 167 22.1 Daily Edition 0,6
7 дюймов 155 × 89 мм, 6,1 × 3,5 дюйма 1920 × 1200 323 21,4 Kindle Fire HDX 2,3
1280 × 800 216 PadFone X mini 1,0
6,9 дюйма 152 × 86 мм, 6,0 × 3,4 дюйма 800 × 480 138 20,4 0,4
5.5 « 4,8 x 2,7 дюйма 1920 x 1080 401 13,0 iPhone 6 плюс 2,1
5,2 дюйма 4,42 дюйма x 2,49 дюйма 960 x 540 217 11,0 InkCase Plus 0,52
4,52 дюйма x 2,54 дюйма 1280 x 720 283 11,5 Kingrow K1 0,9
5,1 дюйма 110 × 66 мм, 4.35 дюймов × 2,62 дюйма 800 x 480 184 11,4 0,4
5,0 « 4,35 x 2,45 дюйма 1920 x 1080 441 10,6 Google Pixel 2 2,1
4,7 дюйма 4,1 x 2,3 дюйма 1280 x 720 315 9,4 Пожарный телефон 0,9
1334 x 750 326 iPhone 6,7,8 1.0
960 x 540 235 Йотафон 2 0,5
4,5 дюйма 3,92 x 2,2 дюйма 854 х 480 218 8,6 PadFone X mini 0,4
4,3 дюйма 95,3 x 54 мм, 3,75 x 2,13 дюйма 1280 x 720 338 8,0
800 x 480 217 BOOX E43 0,38
640 x 360 170
480 x 272 128 Sony PSP 0.13
4,0 « 3 7/16 дюйма x 2 1/16 дюйма 800 x 480 235 7,1 Nokia Lumia 520 0,4
88,9 x 49,3 мм, 3,5 дюйма x 1,94 дюйма 1136 x 640 326 6,8 iPhone 5 0,7
3,5 дюйма x 2 дюйма 1136 x 640 326 6,9 iPod Touch 0,7
3.5 « 3,0 дюйма x 1,8 дюйма 600 x 360 200 5,4 Чернильница 0,2
3,3 дюйма 2,88 x 1,62 дюйма 1280 x 720 445 4,7 Карманный телефон 0,9

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

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

Приблизительное соотношение 3×2
Размер Размеры пикселей пикселей на дюйм Площадь Образец устройства МП
13,5 дюйма 11,2 x 7,5 дюйма 3000 x 2000 267 84.0 Поверхностная книга 6,0
2256 x 1504 201 84,0 Surface Ноутбук 3,4
13,0 « 10,8 x 7,2 дюйма 2880 x 1920 267 77,5 Surface Pro 8 5,5
12,3 дюйма 10,25 x 6,83 дюйма 2736 x 1824 267 70,0 Surface Pro 4 5.0
12,0 « 10 дюймов x 6,67 дюймов 2160 x 1440 216 66,7 Surface Pro 3 3,1
1920 x 1280 192 HP Elite x2 2,5
10,8 дюйма 9 дюймов x 6 дюймов 1920 x 1280 216 54 Поверхность 3 2,5
10,0 « 8,3 x 5,53 дюйма 1800 x 1200 217 46 Поверхность Go 2.2
9,0 « 7,5 x 5 дюймов 1920 x 1280 256 37,5 NOOK HD 9 2,5
8,3 дюйма 6,95 x 4,56 дюйма 2266 x 1488 326 32,0 iPad mini 6 3,4
7,0 « 5,9 x 3,7 дюйма 1440 х 900 243 21,8 NOOK HD 7 1,3
3.9 « 82 x 55 мм, 3,22 x 2,15 дюйма 480 x 320 149 6,9 Compaq iPAQ 0,15
3,5 дюйма 73,9 x 49,3 мм, 2,91 x 1,94 дюйма 320 x 240 116 5,6 iPhone 0,08
480 x 320 165 iPhone 3 0,15
960 x 640 326 iPhone 4 0.6

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

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

Коэффициент
Приблизительное соотношение 2×1
Размер Размеры пикселей пикселей на дюйм Площадь Образец устройства МП
6,9 дюйма 19,8: 9 6,22 x 2,9 дюйма 3088 x 1440 496 18.1 Galaxy Note 20 Ultra 4,4
6,8 дюйма 20,5: 9 6,23 x 2,7 дюйма 2460 x 1080 395 17,0 LG WING 2,7
6,7 дюйма 20: 9 6,1 x 2,75 дюйма 2400 x 1080 393 16,8 Galaxy Note 20 2,6
19,5: 9 6,1 x 2,8 дюйма 2778 x 1284 458 17.0 iPhone 12 Pro Max 3,6
6,5 дюйма 19,5: 9 5,9 x 2,71 дюйма 2688 x 1242 458 15,9 iPhone XS Max 3,3
6,4 дюйма 19: 9 5,76 x 2,7 дюйма 2300 × 1080 399 15,6 Motorola G мощность 2,5
6,4 дюйма 18,5: 9 5.75 дюймов x 2,8 дюйма 2960 х 1440 515 16,1 Galaxy S10 + 4,3
6,3 дюйма 18,5: 9 5,66 x 2,75 дюйма 2960 × 1440 523 15,6 Google Pixel 3 XL 4,3
6,2 дюйма 18,5: 9 5,61 x 2,73 дюйма 2960 х 1440 527 15,3 Galaxy Note8 4.3
6,1 « 19,5: 9 5,5 x 2,53 дюйма 1792 x 828 326 14,0 iPhone XR 1,5
19,5: 9 5,5 x 2,54 дюйма 2532 х 1170 460 14,0 iPhone 12 3,0
18,5: 9 5,48 x 2,67 дюйма 2960 х 1440 540 14,6 Galaxy S10 4.3
6,01 дюйма 18: 9 5,37 x 2,69 дюйма 2160 x 1080 402 14,4 Hisense A6 2,3
6,0 « 18: 9 5,35 x 2,68 дюйма 2880 x 1440 538 14,3 Google Pixel 2 XL 4,1
5,84 дюйма 18: 9 5,22 x 2,61 дюйма 1440 х 720 276 13.5 Hisense A5 1,0
5,8 дюйма 18,5: 9 133 x 64,8 мм (5,24 x 2,55 дюйма) 2960 х 1440 571 13,4 Galaxy S8 4,3
19,5: 9 5,32 дюйма x 2,46 дюйма 2436 x 1125 458 13,1 iPhone X 2,7
5,7 дюйма 18: 9 5,1 x 2,55 дюйма 2880 x 1440 565 13.0 LG G6 4,1
17,1: 9 5,09 x 2,61 дюйма 2560 x 1312 503 13,3 Основной телефон 3,4
5,61 дюйма 18: 9 5,0 x 2,5 дюйма 1440 х 720 287 12,5 Hisense A6 EPD 1,0
5,4 дюйма 19,5: 9 4,9 x 2,27 дюйма 2340 x 1080 476 11.1 iPhone 12 mini 2,5

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

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

Коэффициент
Имя пикселей комментарий фото
QVGA 320×240 4: 3 Quarter VGA используется на Sansa Fuze
WQVGA 400×240 5: 3 0.1 МП
WQVGA432 432×240 9: 5 0,1 МП
HVGA 480×320 3: 2 0,15 МП
nHD 640×360 16: 9 1/9 FHD, 1/4 HD 0,2 МП
VGA 640×480 4: 3 NTSC стандартной четкости (SD TV) 0,3 МП
SD и DVD 720 x 480 3: 2 NTSC с решеткой 0.3 МП
720 x 576 5: 4 PAL (видео) 0,4 МП
WVGA800 800×480 15: 9 или просто WVGA 0,4 МП
WVGA854 854×480 16: 9 он же FWVGA или широкоэкранный SD 0,4 МП
SVGA 800×600 4: 3 0,5 МП
qHD 960×540 16: 9 четверть FHD 0.5 МП
DVGA 960×640 3: 2 0,6 МП
WSVGA576 1024×576 16: 9 0,6 МП
WSVGA 1024×600 15: 9 0,6 МП
XGA 1024×768 4: 3 0,8 МП
WXGA720 1280×720 16: 9 он же 720P или просто HD — (видео) 0.9 МП
WXGA800 1280×800 16:10 поддерживается на Android 1,0 МП
WXGA 1366×768 16: 9 aka FWXGA (иногда 1360×768 для экономии памяти) 1,0 МП
XGA + 1152×864 4: 3 1,0 МП
УВГА 1280×960 4: 3 Ultra VGA (также известный как версия SXGA 4: 3) 4x VGA 1.2 МП
WXGA + 1440×900 16:10 1,3 МП
SXGA 1280×1024 5: 4 1,3 МП
SXGA + 1400×1050 4: 3 1,5 МП
UXGA 1600×1200 4: 3 Ультрарасширенный графический массив 1,9 МП
FHD 1920×1080 16: 9 Full HD, также известный как 1080P или 2K (видео) 2.0 МП
WUXGA 1920×1200 16:10 поддерживается на Android 2,3 МП
QXGA 2048×1536 4,3 Наивысшее разрешение 4x XGA на аналоговом дисплее 3,1 МП
сверхширокий 2560×1080 21: 9 Сверхширокий киноэкран FHD 2,8 МП
QHD 2560×1440 16: 9 4x HD или Quad HD видео 3.7 МП
WQXGA 2560×1600 16:10 поддерживается на Android 4,0 МП
WQHD + 2960×1440 16: 9 он же Quad HD + 4,0 МП
iPad 2592×1944 4: 3 Старые модели передняя камера 5 МП
3264×2448 показан для сравнения, стандартная задняя камера 8.0 МП
UHD 3840×2160 16: 9 Ultra HD, также известное как видео 4K 8,0 МП
UHD + 5 К 5120×2880 2880 — наименьшее число, которое равномерно делит PAL (5) и NTSC (6) 14,7 МП
8K UHD 7680×4320 иногда называют 8K Super UHD video 33 МП

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

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

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

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

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

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

Почему?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Давайте использовать 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

5.0 ДЮЙМ 5,66 x 2,74 x 0,33 дюйма

Разрешение Google Pixel

1080 x 1920 PX ~ 441 пикселей на дюйм

Google Pixel Viewport

412 x 732 пикс. ~ 168 пикселей на дюйм

Плотность пикселей Google

2.625 xxhdpi Дисплей Retina 2,625x

Сведения об ОС

Google Pixel был запущен в Октябрь 2016 г.
Google Pixel есть Android 7.1 (Nougat) и возможность обновления до Android 8.0 (Oreo)

Размеры экрана

Размер экрана Google Pixel составляет 5,0 дюйма с ~ 69% от фактического размера устройства. Физические размеры для Устройство Google Pixel 5.66 x 2,74 x 0,33 ДЮЙМА или ( 143,8 х 69,5 х 8,5 мм).

Отображение единиц в следующем порядке: «Высота x Ширина x Толщина».

Плотность пикселей экрана и соотношение пикселей CSS

«Пиксель» — это наименьшая единица / элемент любого дисплея.

Общее количество пикселей, которые умещаются на дюйм, называется «Плотностью экрана» или «Плотностью пикселей» и измеряется как «Пикселей на дюйм».Плотность
пикселей имеет ограничения для отображения пикселей на дюйм, в зависимости от размера экрана. Когда количество пикселей на дюйм превышает ограничение на размер экрана, разрешение экрана увеличивается, но фактическая ширина / высота устройства в пикселях остается неизменной. Фактические пиксели устройства известны как пиксели, независимые от устройства, или соотношение пикселей CSS.

Разрешение Google Pixel составляет 1080 x 1920 PX с плотностью ~ 441 пиксель.Размер области просмотра
Google Pixel составляет 412 x 732 PX с фактической плотностью ~ 168 пикселей, что означает, что плотность пикселей дисплея составляет 2,625 xxhdpi.

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

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

Google Pixel есть Размер физического экрана 5,0 дюйма и его разрешение составляет около 1080 x 1920 пикселей с плотностью пикселей около 441 PPI. Google Pixel имеет размер области просмотра 412 x 732 пикселей, а его соотношение пикселей составляет около 2,625.

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

Медиа-запросы CSS

Google Pixel Media Queries (только для мобильных устройств)

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

Медиа-запросы минимальной ширины Google Pixel

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

Медиа-запросы Google Pixel с минимальной высотой

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

Медиа-запросы Google Pixel Landscape

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

Медиа-запросы для портретной съемки Google Pixel

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

Медиа-запросы Google Pixel Retina

  @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 * /
}
                                  

Retina фактически основывается на соотношении пикселей устройства. Устройства в основном имеют 2- или 3-кратный дисплей, поэтому вы можете использовать общие медиа-запросы Retina для отображения контента с высоким разрешением на всех типах устройств. Медиа-запросы Retina 2x и Retina 3x приведены ниже:

Retina 2x Media Query

  @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 * /
}
                                  

Retina 3x Media Query

  @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 * /
}
                                  

Google Pixel Технические характеристики

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

Размер экрана мобильных устройств на 2021 год по данным за 2020 год

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

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

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

Ширина экрана мобильных устройств на 2021 год на основе данных за 2020 год

На основе четырех веб-сайтов с высокой посещаемостью и выборки из более 8 миллионов пользователей за 6 месяцев (июнь — ноябрь 2020 г. по сравнению с тем же периодом в 2019 г.). В примере используются данные из путешествий, банковского дела, электронной коммерции и строительства.

2021 размер экрана выводы
  • Наиболее распространенное разрешение экрана мобильных устройств, которое мы сейчас видим, составляет от 412 до 414 пикселей в ширину (в основном 414 пикселей), ранее первое место занимали устройства шириной 375 пикселей
  • С ростом числа телефонов с шириной экрана от 412 до 414 пикселей нам нужно будет изменить подходы дизайнеров к дизайну для мобильных устройств.
  • Устройства с разрешением от 360 до 375 пикселей по-прежнему являются наиболее распространенными, составляя 55% от всех устройств из нашей выборки
  • .
  • Гораздо меньше посетителей с экранами «другого» размера по сравнению с предыдущим годом.

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

Самые распространенные размеры мобильных экранов на 2021 год (высота и ширина)

На основе четырех веб-сайтов с высокой посещаемостью и выборки из более 8 миллионов пользователей за 6 месяцев (июнь — ноябрь 2020 г. по сравнению с тем же периодом в 2019 г.). В примере используются данные из путешествий, банковского дела, электронной коммерции и строительства.

Почему высота экрана имеет значение, когда пользователи могут выполнять прокрутку?

Проектирование с учетом наиболее распространенной высоты устройства также гарантирует вам:

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

Как найти у своих посетителей наиболее распространенные размеры мобильных экранов на 2021 год с помощью Google Analytics

Простой метод : выполните поиск по запросу «разрешение экрана мобильного устройства» в строке поиска Google Analytics — это даст вам цифры только за последние 7 дней и не покажет вам проценты, но отлично, если вам нужна идея верхнего уровня.

Правильный метод : Создайте настраиваемый отчет с параметром «разрешение экрана» и показателями «пользователи» и «коэффициент конверсии пользователей», используя сегмент «мобильный», а также все, что вам нужно.Я обычно делаю этот отчет довольно простым. Убедитесь, что вы выбрали период времени от 3 до 6 месяцев в зависимости от того, сколько у вас данных.

В чем разница между разрешением экрана и размером области просмотра?

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

Максимальное разрешение экрана на самом деле является множителем соотношения пикселей CSS (Источник: Yesvis).Например, разрешение экрана iPhone 12 составляет 1170 x 2532, а размер области просмотра (который мы увидим в Google Analytics) — 390 x 844.

Расхождения в Google Analytics

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.

Пролистать наверх