Значение DOM «window.devicePixelRatio» и свойство CSS «device-pixel-ratio» станут переменными величинами

Более двух лет прошло после начала продаж iPhone 4 летом 2010 года, и за эти два года сайтостроители привыкли проверять джаваскриптом значение window.devicePixelRatio (или же использовать в CSS медиазапрос device-pixel-ratio) как простое и бесхитростное средство, позволяющее тотчас же выяснить, запущен ли сайт на сетчаточном дисплее (retina display) или нет. Если величина devicePixelRatio равна двойке, то перед нами сетчаточный дисплей (четвёртый iPhone, четвёртый iPod Touch, третий iPad, или более новые устройства, или портативный компьютер «MacBook Pro with Retina Display»); если же величина devicePixelRatio равна единице (или не определена), то перед нами дисплей обычной чёткости.

Чуть сложнее, по сравнению с эппловскими, бывает учёт устройств, работающих под Android: там приходится воспринимать дробные величины, не равные единице или двойке. Peter-Paul Koch сообщил во блогозаписи «More about devicePixelRatio» о том, что (по его наблюдениям) в Nexus One величина devicePixelRatio равна 1,5, тогда как в Galaxy Nexus и в Galaxy Note она равна двум в WebKit и 2,25 в Opera Mobile.

Но эти мелкие отличия не меняют картины в целом: все привыкли думать о значении величины devicePixelRatio как о таком свойстве устройства, которое на одном и том же мобильнике (или планшете, или ноутбуке) остаётся беспрерывно постоянным. В частности, именно на этом были основаны все, все рецепты из хабрахабровских блогозаписей «Адаптируем графику под Retina экран», «Распознаём retina-дисплеи джаваскриптом», «Отображаем карты OpenStreetMap на iPhone 4 с учётом сетчаточного дисплея при помощи Leaflet», «Как отличить версию iPad в Safari», «Оптимизация графики для Retina-экранов», «Комплексная подготовка сайта к Retina» и им подобных.

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

Первый звонок прозвенел, когда Peter-Paul Koch обновил свою блогозапись «More about devicePixelRatio» и написал в постскриптуме, что наблюдал воочию: значение devicePixelRatio во браузере Opera Mobile зависит от увеличения страницы (zoom).

Второй звонок прозвенел, когда поддержка devicePixelRatio появилась во браузере Firefox версии 18 — эта величина была там задана также в качестве зависящей от увеличения страницы.

Третий и последний звонок прозвенел, когда участники W3C в рамках списка рассылки www-style в письмах на тему «Behavior of device-pixel-ratio under zoom» окончательно договорились (менее недели тому назад) о том, что значение devicePixelRatio определяется количеством физических (экранных) пикселов, приходящихся на CSS-пиксель страницы — а как оно было достигнуто (внедрением ли сетчаточного дисплея или простым нажатием Ctrl-+ на клавиатуре), никого не должно беспокоить.

Всё, господа читатели. Можете навсегда позабыть о том, что devicePixelRatio имеет постоянное значение, свойственное конкретному устройству. Это не правда — вернее, теперь это не всегда правда.

Понятно, что такая новость имеет две стороны — хорошую и плохую.

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

Наверное, не всех сайтостроителей обрадует, что раньше было достаточно считывать devicePixelRatio джаваскриптом в сáмом начале работы с документом (по событию load или ready), а теперь открывается возможность (а не то и необходимость) ещё повозёхаться, время от времени проверяя devicePixelRatio и по мере нужды подстраивая разрешение картинок к изменившемуся увеличению страницы, когда и если читатель его изменит.

С другой стороны, читателям-то будет приятно. Раньше для получения из Интернета высокочёткой версии той или иной картинки было необходимо закупить дорогое эппловское оборудование с сетчаточным дисплеем, способным эту версию отобразить. А теперь достаточно пару раз Ctrl-+ на клавиатуре надавить — и с сайта скачается да отобразится изображение удвоенной ширины и удвоенной высоты, если, конечно, автор сайта не забыл джаваскриптом запрограммировать реакцию на изменение величины devicePixelRatio или поместить в CSS медиазапрос на основе device-pixel-ratio.

Можно надеяться, что в будущем именно этот нюанс сайтостроения ещё упростится, если будет принято февральское предложение о свойстве image-set:

selector {
   background: image-set(url(foo-lowres.png) 1x,
                         url(foo-highres.png) 2x) center;
}

Нельзя не упомянуть, что в WebKit его внедрили ещё в марте.

Это вдохновляет. Будущее начинает выглядеть лучезарным.

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