Web Analytics Made Easy - StatCounter
Главная Блог Соотношение пикселей устройства

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

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

История

До спецификации CSS2 2008 года пиксель был относительной единицей. У него не было фиксированного отношения к абсолютным единицам, таким как дюймы, см, мм и т. Д.

Начиная со спецификации CSS2.1 2011 года, пиксель является абсолютной единицей и имеет фиксированное отношение к другим абсолютным единицам, которое составляет 96 пикселей = 1 дюйм (см. W3C Proposed Recommendation).

По-старому

До CSS2 абсолютные единицы (которые были в, см, мм, pt, pc) были привязаны к их физическим измерениям. То есть веб-браузеры были реализованы таким образом, что 1 дюйм в CSS всегда измерял 1 дюйм на экране, если измерять с помощью линейки.

px был относительно блока и его размер был определен концепцией опорного пикселя. Эталонный пиксель - это чисто теоретическое понятие. Это идеальный размер пикселя в миллиметрах, основанный на расстоянии от зрителя до экрана и плотности пикселей экрана. Он не должен быть слишком большим, чтобы глаз не мог легко различить отдельный пиксель, и он не должен быть меньше необходимого. Таким образом, величина опорного пикселя является уникальной для каждого устройства. Это может быть, например, 0,26 мм для одного устройства или 1,4 мм для другого устройства.

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

Самое главное, что соотношение пикселей и дюймов не было фиксированным. Таким образом, если две линии размером 96 пикселей и 1 дюйм, соответственно, имели одинаковую физическую длину на одном устройстве (например, мониторе с разрешением 96 пикселей на дюйм), они могли иметь разную длину на другом устройстве.

Обратите внимание, что 96 PPI было наиболее распространенной плотностью пикселей экрана компьютера в какое-то время (квазистандарт).

Такое поведение и предположение разработчиков о том, что 96 пикселей всегда равняется 1 дюйму (если они тестировали свой дизайн на мониторе с разрешением 96 пикселей на дюйм), по-видимому, были основной причиной того, что рабочая группа CSS решила ввести новое определение пикселей в CSS2. 1:

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

Смотрим зелёную сноску внизу W3C Proposed Recommendation.

Новый путь

Начиная с CSS2.1 (2011), пиксель является абсолютной единицей с фиксированным соотношением к другим абсолютным единицам, в частности 96 пикселей = 1 дюйм.

На самом деле теперь есть два способа определения физических размеров абсолютных значений (из которых только второй имеет значение для веб-разработчиков):

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

Смотрим W3C Proposed Recommendation.

Вариант 1 применяется в основном только для печати (и устройств с очень высоким разрешением) и не имеет отношения к веб-дизайну. В этом случае 1 дюйм всегда отображается как 1 дюйм, а 1 пиксель - как длина 1/96 пикселя.

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

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

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

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

Примеры расчета физической длины пикселей

Например, размер пикселя физического устройства может составлять 0,12 мм (220 PPI, как в MacBook Pro 15 ”2017), а эталонный пиксель для этого типа устройства может быть 0,26 мм. Кратное значение 0,12 мм, которое наилучшим образом соответствует 0,26 мм, составляет 2 * 0,12 мм = 0,24 мм. Таким образом, физическая длина пикселя составляет 0,24 мм. Таким образом, физическая длина 1 дюйма (что эквивалентно 96 пикселей) на этом экране будет 96 * 0,24 мм = 23,04 мм, то есть несколько короче, чем реальная длина дюйма в 25,4 мм.

Здесь следует помнить о соотношении пикселей устройства, равном 2 (иногда называемом соотношением пикселей CSS). Контент шириной x пикселей отображается на экране размером 2 * x физических пикселей по ширине. Например, горизонтальная линия длиной 100 пикселей имеет длину 200 физических пикселей на экране. Это относится как к ширине, так и к высоте. Итак, квадрат шириной 1 пиксель и высотой 1 пиксель отображается на экране как блок физических пикселей 2x2.

Обратите внимание, что соотношение пикселей устройства на MacBook Pro 15 ”в действительности составляет 2.

Другой пример: MacBook Air 11" 2015 года имеет плотность пикселей 135 PPI и, следовательно, ширину пикселя устройства 0,188 мм. Предположим, для этого примера, размер эталонного пикселя CSS для этого устройства составляет 0,26 мм. Множитель 0,188 мм, который приближается к 0,26 мм, сам по себе составляет 0,188 мм, таким образом, мы получаем соотношение пикселей устройства 1. В этом случае теперь линия длиной 1 дюйм будет иметь размер на экране 96 * 0,188 мм = 18,05 мм.

Соотношение пикселей устройства, используемое на MacBook Air 11", действительно похоже на 1. Это можно увидеть, нарисовав 1 в строке в браузере и измерив ее линейкой на экране. Его длина будет 18 мм.

Еще один пример: смартфон Huawei P10 имеет дисплей с разрешением 432 PPI, что означает размер пикселя физического устройства 0,0588 мм. Предположим, что эталонный размер пикселя для этого устройства составляет 0,15 мм (это просто невежественное предположение, я не рассчитывал его; но он должен быть меньше, чем для ноутбука, потому что расстояние просмотра меньше). Кратное 0,0588 мм, ближайшее к 0,15 мм, составляет 3 * 0,0588 мм = 0,1764 мм. Таким образом, размер px на Huawei P10 составляет 0,1764 мм. Линия 1 на этом устройстве составляет 96 * 0,1764 мм = 16,93 мм.

Опять же, это можно проверить, измерив 1 на линейке на экране Huawei P10. Важно знать, что соотношение пикселей устройства Huawei P10 в данном случае равно 3.

Обратите внимание, что в случае с мобильным телефоном есть небольшая сложность. Соотношение пикселей устройства, равное 3, и производная физическая длина 16,93 мм строки 1 в строке применяется только в том случае, если область просмотра браузера установлена ​​на так называемую ширину устройства, которая представляет собой ширину устройства в логических пикселях CSS. на основе соотношения пикселей устройства, равного 3. В случае Huawei P10 ширина экрана составляет 1080 физических пикселей, то есть 1080/3 = 360 CSS-пикселей. Только если для области просмотра установлено это значение, 1 пиксель будет равен ровно 3 физическим пикселям, а длина строки 1 на экране составляет 16,93 мм. Но об этом позже.

Резюме для расчета физической длины в пикселях

  • Узнайте плотность пикселей (PPI) целевого устройства.
    • Технические характеристики устройства.
    • Рассчитайте на DpiLove.
  • Узнайте соотношение пикселей целевого устройства.
  • Вычислить физический размер пикселя устройства.
    • Разделите 1 на плотность пикселей; это физический размер пикселя устройства в дюймах.
  • Вычислить физический размер пикселя (пиксель CSS).
    • Умножьте размер пикселя устройства на соотношение пикселей устройства.

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

Соотношение пикселей устройства, как описано выше, представляет собой отношение физических пикселей (пикселей устройства) к логическим пикселям. В случае веб-сайтов это количество физических пикселей, равное размеру пикселя CSS (px).

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

Цель

Назначение соотношения пикселей устройства состоит в том, чтобы «солгать» о разрешении дисплея. Например, iPhone 4 имеет разрешение 640 x 960 пикселей, но соотношение пикселей устройства равно 2, что делает его похожим на разрешение 320 x 480 пикселей. Это то же самое, что и физическое разрешение iPhone 3G. Эта эгализация абстрактных разрешений iPhone 3G и iPhone 4 стала причиной введения соотношения пикселей устройства, см. Историю.

В качестве другого примера, Huawei P10 имеет разрешение 1080 x 1920 пикселей и соотношение пикселей устройства 3. Таким образом, это заставляет экран иметь разрешение 360 x 640 пикселей для средств визуализации контента, которые учитывают соотношение пикселей устройства. , как и веб-браузеры.

MacBook Pro 15.4 ”имеет разрешение 2880 x 1800 пикселей и соотношение пикселей устройства, равное 2 (как и все MacBook с дисплеями Retina), в результате чего кажется, что дисплей имеет разрешение 1440 x 900 пикселей.

Соотношение пикселей устройства не обязательно должно быть целым числом. Различные устройства определяют отношение действительных чисел. Например, Motorola Nexus 6 сообщает о соотношении пикселей устройства 3,5. Этот телефон имеет разрешение 1440 x 2560, что с учетом соотношения пикселей устройства дает логическое разрешение 432 x 732 пикселей.

Причина

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

Возьмем, к примеру, Motorola Nexus 6. У него разрешение по горизонтали 1440 пикселей. Это больше, чем у MacBook Air 11.6 ”с горизонтальным разрешением 1366 пикселей. Без соотношения пикселей устройства веб-сайт, который просматривается во всю ширину на MacBook Air, будет отображаться в такой же полноразмерной форме на Nexus 6. Он будет выглядеть как уменьшенная копия веб-сайта на MacBook Air. Хотя это может показаться симпатичным, это затрудняет чтение из-за небольшого физического размера и требует от пользователя увеличения.

С другой стороны, с учетом соотношения пикселей устройства Nexus 6 «притворяется» перед модулем визуализации HTML, что на самом деле это устройство с разрешением 432 x 732 пикселей. Веб-сайт в этом случае будет выглядеть так же, как при изменении размера окна браузера на MacBook Air до 432 x 732 пикселей. То есть текст и другое содержимое больше по сравнению с размером дисплея. Например, изображение шириной 400 пикселей заполняло бы большую часть экрана Nexus 6, тогда как без соотношения пикселей устройства оно занимало бы менее трети ширины экрана и могло бы быть не легко видимым без увеличения.

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

Обратите внимание, что с ранними смартфонами это сжатие контента не было проблемой, поскольку эти устройства имели гораздо более низкую плотность пикселей. Например, iPhone 3G имел физическое разрешение 320 x 480 пикселей, что уже является «подходящим» разрешением для дисплеев такого размера, поэтому не было необходимости в применении соотношения пикселей устройства. Только когда плотность пикселей на смартфонах постоянно увеличивалась, это стало проблемой, и пришлось вводить соотношение пикселей устройства.

Узнать соотношение пикселей устройства

Существует несколько компиляций соотношения пикселей популярных устройств:

Например, соотношение пикселей некоторых интересных устройств составляет:

DeviceDevice Pixel Ratio
iPhone <= 3G1
iPhone 4–72
iPad >= 33
MacBook < 20122
MacBook >= 20122
Huawei P103
Motorola Nexus 6s3,5

История

История соотношения пикселей устройства началась в 2012 году, когда Apple представила дисплей Retina для iPhone 4. Согласно Apple, дисплей Retina - это дисплей, на котором невооруженный глаз не может различить отдельные пиксели на нормальном расстоянии просмотра.

IPhone 3G имел разрешение 320 x 480 пикселей и плотность пикселей 165 PPI. У iPhone 4 было разрешение 640 x 960 пикселей с тем же размером дисплея, что и у iPhone 3G, и, следовательно, удвоенная плотность пикселей - 330 PPI (это означает, что ширина и высота пикселя были уменьшены вдвое). Это был волшебный шаг Apple к дисплеям с высоким разрешением (Retina).

История соотношения пикселей устройства
История соотношения пикселей устройства

Но теперь виджет пользовательского интерфейса, определенный в пикселях, будет вдвое меньше физической ширины и высоты на iPhone 4 по сравнению с iPhone 3GS. Apple хотела, чтобы одни и те же определения пользовательского интерфейса отображались с одинаковым физическим размером на обоих устройствах, и поэтому ввела соотношение пикселей устройства, равное 2 для iPhone 4. Это соотношение пикселей устройства в основном вводило уровень абстракции между пикселями физического устройства и абстрактной логикой пиксели, которые используются для макета содержимого. Таким образом, iPhone 4 в основном «обманывает» отображаемое на нем устаревшее содержимое iPhone 3G, что это телефон с разрешением 320 x 480 пикселей (как iPhone 3GS), тогда как на самом деле это телефон с разрешением 640 x 960 пикселей. Отображение логических пикселей в пиксели физического устройства затем выполняется под капотом.

Таким образом, контент размером 50 x 50 пикселей отображается на iPhone 3GS как квадрат размером 50 x 50 физических пикселей, тогда как на iPhone 4 он отображается как квадрат размером 100 x 100 физических пикселей, однако на обоих телефонах квадрат имеет такой же физический размер (если измерять его линейкой на экране).

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

Область просмотра и мобильные браузеры

Раньше веб-сайты отображались в основном на настольных мониторах, а типичная плотность пикселей монитора составляла 96 PPI. Таким образом, длина ряда из 96 пикселей на этих мониторах составляет ровно 1 дюйм.

Это было настолько распространено, что CSS «жестко запрограммировал» это. Он определяет соотношение единиц пикселей и дюймов как 96 пикселей = 1 дюйм.

Таким образом, на мониторе с разрешением 96 пикселей на дюйм размер 1 пикселя в точности равен размеру 1 физического пикселя монитора, а именно 0,265 мм (1/96 дюйма).

Линия длиной 96 пикселей и толщиной 1 пиксель в CSS отображается на мониторе с разрешением 96 пикселей на дюйм длиной ровно 1 дюйм, если измерять с помощью линейки на экране. Кроме того, эта линия состоит из 96 физических пикселей.

Обратите внимание, что физический размер 1 пиксель и соотношение 96 пикселей = 1 дюйм естественным образом вытекают из физических размеров других абсолютных единиц измерения: mm, cm, pc, pt (если измерять с помощью линейки на экране).

Что делать, если плотность пикселей монитора не 96 PPI?

Как мы видели, на экране с разрешением 96 пикселей на дюйм один пиксель соответствует 1 пикселю.

Что, если у монитора, например, 135 PPI (как у MacBook Air 11 ”2015 года)? Должен ли 1 пиксель теперь соответствовать 1,406 физическим пикселям (135/96), чтобы линия 96 пикселей по-прежнему составляла 1 дюйм при измерении с помощью линейки на экране? Или 1 пиксель должен соответствовать 1 физическому пикселю, и, следовательно, линия 96 пикселей будет иметь длину всего 0,711 дюйма при измерении линейкой на экране?

Ответ дается относительным пикселем CSS.

Ссылки

Источники