Более двух лет прошло после начала продаж 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 его внедрили ещё в марте.

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

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