Пиксель всегда был наименьшей единицей в цифровом дизайне. Это невидимая величина измерения для дизайнеров. Фраза «пиксель пиксель пиксель» была принята в помощь принт-дизайнерам, чтобы те могли понимать концепт фиксированной плотности экрана. Веб-дизайнеры в свою очередь приняли пиксели взамен точкам.
Теперь, когда техника быстро совершенствуется и ppi постоянно растет, появилась необходимость найти некую относительную величину, которая всегда была бы стабильной. Такой величиной некогда был пиксель. Масштабируемость страницы в браузере совсем другая вещь, читайте на QuirksMode. Что есть пиксель на экрана с высоким разрешением? Почему картинка с разрешением 640px × 960px на iPhone 4 отображается в браузере как 320px × 480px? Правда в том, что существует два понятия пикселей: они могут быть наименьшими физическими единицами на экране (аппаратные пиксели), а могут быть оптической единицей — референсным пикселем.
Аппаратный пиксель
Большинство из нас знакомы с аппаратным пикселем. Это наименьшая физическая точка на экране, которая содержит в себе красный, зеленый и синий субпиксели. Свет этих субпикселей смешивается и мы видим картинку выстроенную из пикселей. Так как аппаратный пиксель является физическим элементом экрана, то мы не можем его ни растянуть, ни разделить. Эти свойства делают пиксель чем-то вроде атома: единица дизайна на которой все построено.
Референсный пиксель и разделяющиеся атомы
Теперь все немного поменялось. В настоящее время W3C рассматривает возможность принятия референсного пикселся как стандартную единицу измерения. Все системы мер основанные на аппаратном пикселе теперь будут основываться на референсном, который приблизительно в два раза больше аппаратного. Такой пиксель будет иметь один и тот же размер на любом экране, с любой плотностью. Красота его в том, что он учитывает близость к экрану. Держа телефон близко к лицу, референсный пиксель будет меньше чем проекция, которую вы видите с большего расстояния. Если расположить телефон на одном уровне с проекцией, то разер пикселей должен совпадать, независимо от ppi или разрешения дисплея устройства. При должной реализации, новый стандарт обеспечит беспрецедентную стабильность на всех устройствах и платформах, в независимости от расстояния просмотра и плотности пикселей на экране.
Референсные пиксели удивительны, но теперь мы имеем два противоречивых определения. Устройства на Android имеют свою величину, которая называется «плотность-независимый пиксель» (density independent pixel, dip). Эту величину разработчики используют для определения количества оптических пикселей занимаемое элементом на экране. Она позволяет использовать аппаратные пиксели для создание корректно отображающейся графики с помощью px и относительной величины для задания размеров текста. Эти универсальные величины работают для всех устройств, независимо от параметров их дисплеев. Android поступили разумно разделив определение «пиксель» на два других, но веб имеет дело с контентом годами создававшимся на основе аппаратного пикселя. Было бы замечательно иметь на вооружении подобные величины и для веб-дизайнеров. Но без полного пересмотра пикселя как определения, основывающийся на нем веб может пасть. Мобильные устройства обычно сжимают ширину веб-сайтов до ширины экрана, таким образом текст становится совершенно не читаемым. Сайты блокирующие зум сразу же становятся бесполезными.
Стандартные размеры пикселей на Galaxy Tab и Kindle Fire.
Мы также не знаем, что каждое устройство считает пикселем и это проблема. Например, Galaxy Tab и Kindle Fire имеют одинаковый размер экрана и разрешение; но пиксели на Tab, корректируемые референсным пикселем, в 1.5 раза больше чем аппаратные на Kindle Fire. Невозможно разрабатывать что-либо под определенное устройство не имея его на руках для проведения тестов потому, что на данный момент существует всего одна стандартизированная спецификация единицы измерения на экране — аппаратный пиксель. Глядя на эти два устройства и зная, что параметры их дисплеев идентичны, и оба используют Webkit для рендеринга, веб-разработчик подумает, что его веб-сайт будет смотреться одинаково на обоих. К сожалению, это не так.
Определение точек разрыва и движение вперед
Можно с уверенностью сказать, что пиксели сейчас находятся не в лучшем положении. Но мы можем использовать Media Queries для выявления несоответствий и их корректировки. С помощью media query device-pixel-ratio возможно определить устройство с «не стандартными» пикселями. Так же можно комбинировать это свойство с определенными разрешениями для более точного определения. iPhone 4 имеет device-pixel-ratio равное двум, то есть его пиксели в два раза больше аппаратных пикселей. Большинство устройств на Android имеют пиксели в 1.5 раза превышающие размер аппаратных. Во сколько раз «мнимые» пиксели больше аппаратных, во столько раз больше будет изображение на экране. Специфика является ключевым фактором при определении класса устройств. Но не стоит быть на столько конкретным, чтобы задавать параметры определения устройства для каждого из них. Большинство девайсов имеют схожие проблемы. С помощью Media Queries мы можем определять устройства по величине «мнимых» пикселей, ширине и высоте экрана и т.д. Также можно определить текущую ориентацию устройства (портретная или альбомная):
@media screen and (device-pixel-ratio: 1.5)
and (device-width: 683px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1.5)
and (device-width: 400px)
and (orientation: portrait)
Обратите внимание, что media query device-pixel-ratio все еще требует использования вендорных префиксов.
Теперь давайте посмотрим на Kindle Fire, у которого разрешение экрана такое же, как и у Galaxy Tab, но в отличии от второго, используются аппаратные пиксели. Иметь дело с подобными устройствами немного осложняет задачу, большая вероятность того, что нетбуки и планшеты попадут под заданные параметры. Используя media queries orientation и max-device-height мы определим нужное нам устройство. Обычно возвращаемая высота экрана немного меньше фактической, чтобы отсеять планшеты с разрешением 1024 x 768 зададим высоту до 600px. Это будет выглядеть так:
@media screen and (device-pixel-ratio: 1)
and (device-width: 1024px)
and (max-device-height: 600px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1)
and (device-width: 600px)
and (max-device-height: 1024px)
and (orientation: portrait)
Нормализованные пиксели на Galaxy Tab и Kindle Fire.
Для большего контроля над изменением размера вашего веб-сайта можно использовать в качестве меры em, это применимо не только к тексту, но и ко всему, что измеряется в px. Теперь нужно задать размер шрифта. В media query для Kindle Fire зададим размер в 1.5 раза больше текущего. Если хотите заставить Galaxy Tab отображать в аппаратных пикселях, то умножьте размер текста на 2/3 и запишите результат в media query для Tab. Пример с кодом можно посмотреть здесь.
Как видите, корректировать несколько «видов» пикселей — не так просто. Пиксель — самая основная единица и переход к оптическому пикселю вызовет много странных изменений. Производители мобильных устройств проделывают хорошую работу по выявлению и решению этих проблем, но всегда что-то будет не так. К счастью у нас есть инструменты, которыми можно и нужно пользоваться для решение просочившихся проблем.
Автор: roman01la
