Значение 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 его внедрили ещё в марте.

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

    Обратите внимание, что теперь наряду с удвоением размера картинки возможным становится утроение, учетверение и так далее — по мере готовности читателя подкручивать увеличение и по мере готовности сайтостроителя обеспечить предоставление всё более крупных версий одной и той же иллюстрации.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 31

      +6
      запущен ли сайт на сетчаточном дисплее (retina display)
      OMG
      Retina display — это маркетинговый термин, его не надо переводить как «сетчаточный», потому что сетчаточный дисплей — это "retinal display".

      А статья интересная, спасибо :)

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

      Ещё бы такое для тега <img> сделали.
      Изменение devicePixelRatio в зависимости от зума — это правильно. Часто бывает, что растягиваешь картинку чтобы рассмотреть, а там — 128х64. Было бы неплохо, если бы картинка при зуме становилась чётче.
        +1
        … и ещё лучше было бы, если бы веб-серверы сами умели отдавать из фулл-сайз картинки только самое необходимое на текущий момент…

        Мечты, мечты…
          0
          Progressive JPEG?
          Но автоматически — это как?
          Это же клиент должен как-то сообщать серверу, в каком качестве он хочет получить картинку. А при зуме — докачивать.
          Но если браузер сможет динамически обрабатывать зум и background: image-set, то уже хорошо — можно автоматизировать сжатие картинок и генерацию image-set-ов на замену <img>.
        0
        Retina display — это маркетинговый термин, его не надо переводить как «сетчаточный», потому что сетчаточный дисплей — это "retinal display".
        В языковом отношении разницы нет, потому что в русском языке (в отличие от английского) существительные не используются в роли прилагательных. Кроме того, в русском языке (по крайней мере, в некоторых словарях, как нетрудно видеть на Gramota.Ru, например) есть слово «ретина» в значении «сетчатка» — следовательно, разница между прилагательными «ретиновый» и «сетчаточный» подобна разнице между «бегемотовый» и «гиппопотамовый».

        В итоговом отношении также особенной разницы нет: речь идёт о создании в глазу изображения, по чёткости сопоставимого с пиксельностью самóй сетчатки, просто virtual retinal display достигает этого лазерной проекцией внутрь глаза, тогда как retina display создаёт высокочёткое изображение на реальном наблюдаемом экране.
          +5
          В итоговом отношении также особенной разницы нет
          Собственно, разница в том и состоит, что ретиновый/сетчаточный дисплей создаёт изображение на сетчатке глаза, а Retina display — всего лишь маркетинговое название обычного дисплея с более высокой плотностью пикселей, причём необходимая плотность пикселей определяется «на глаз» в отделе маркетинга фирмы Эпл — по угловому размеру пикселя.

          Если следовать вашей логике и логике маркетинга фирмы Эпл, то отодвинув обычный монитор на два метра вы сделаете из него «сетчаточный», так как угловой размер пикселя станет меньше, и разрешение экрана станет сопоставимо с «пиксельностью самóй сетчатки»?
            +8
            Сколько можно этот бред нести про сетчатку? Да Apple даже пишет это название всегда с большой буквы, с какого перепугу прилагательные писать с большой буквы. Тем более, что у других производителей есть дисплеи с аналогичной плотностью, и никто их Retina не называет. С таким же успехом фразу «FaceTime camera» можно переводить, как «лицевременная камера».
            Извиняюсь за резковатость, но достало уже.
            +3
            Вы его ещё писать правильно научите, ага.
            –1
            … теперь достаточно пару раз Ctrl-+ на клавиатуре надавить — и с сайта скачается да отобразится изображение удвоенной ширины и удвоенной высоты

            А я до сих пор знаю людей, которые могут случайно такие комбинации нажимать и у них дома платный ограниченный траффик… (
              –1
              Для таких людей на большинстве сайтов разница между замыленной картинкой и четкой вроде бы как не важна. По идее пользователю вообще нельзя навязывать увеличенный трафик (в настройках профиля, если сайт с авторизацией, делать опцию «Хочу четкую графику» и если матрица позволяет — отдавать ему повышенное разрешение, а по дефолту обычное).
                +2
                Таким людям надо перестать кормить мегабайты JS'а, CSS'а и вернуть в волшебный мир 64к страничек на HTML4.01 c гифовыми распорками в табличках.
                • UFO just landed and posted this here
                    0
                    В html 3.2 были table? Я не помню, в какой версии они были добавлены.
                    • UFO just landed and posted this here
              0
              Собственно хранить комплект картинок удвоенного размера еще куда ни шло, но при таком подходе ведь понадобятся и 3x и 4x… ИМХО веб еще к такому не готов. Для крупных сайтов это будет означать стремительное пожирание диска на сервере только для копий картинок. Поэтому, как мне кажется, пока можно было бы пренебречь зумом и оставить лишь 2x копии изображений под Retina.
              Но возникает вопрос, как при таком подходе достоверно убедиться в том, что пользователь пришел с ретиной?
                0
                Большая картинка плюс ресайз, плюс автоматический кеш ресайза.
                  0
                  т.е. без вариантов, хочешь не хочешь, качай лишние мегабайты?
                    0
                    Он имеет ввиду отсутствие больших сложностей с созданием множества вариантов картинок
                      0
                      Не хочешь, не качай. Никто же не запрещает заходить, например, на habrahabr.ru, у которого заглавная страница в сумме 928кб.
                        0
                        У меня 653кб, видимо треть трафика это реклама.

                        Интересно, админы хабра ведут статистику относительно того, какой процент пользователей использует AdBlock и его аналоги, что бы резать рекламу? Было бы интересно взглянуть (касается не только Хабра).
                    +2
                    Вам не нужно знать ретина или нет. Всё что вам надо, это сколько пикселей показывать. Ответ на этот вопрос есть.
                    +2
                    По-моему, давно уже есть потребность в новом формате хранения мультимедиа.
                    Типа прогрессивного джепега, но с докачкой.

                    Сначала скачал N Кб для версии х1.
                    Потом, если надо, докачал кусок, содержащий улучшение до версии х2.
                    Первый и второй куски не содержат информации, которая бы повторялась.
                    И так далее.

                    Этот принцип можно применить как к видео, так и к аудио.
                    Главное, продумать, как хранить — в одном файле или в разных, и встроить поддержку в проигрывающий софт.

                    В идеале хотелось бы видеть поддержку на уровне ФС.
                      –1
                      учитывая сколько времени обучался ИЕ кушать корректно прозрачные png, к появлению нового формата мы будем голограммы в мозгу проецировать…
                      А вообще согласен. Напрашиваются многослойные форматы данных, когда понимание файла перестает быть традиционным. В идеале ФС воспринимала бы туже картинку как папку, каждый файл внутри это слой, каждый следующий содержит дополнительный набор пикселей по сравнению с предыдущим. Вроде бы описать это не сложно…
                        +1
                        В увеличившемся количестве запросов к серверу тоже могут быть проблемы. Лучше уж в заголовок HTTP запроса вставлять какие картинки хочешь, и пусть сразу выдаются нужные.
                      • UFO just landed and posted this here
                          0
                          Какая странная трактовка. Естественно не намерены, потому что так называемое device-pixel-ratio уже стандартизировано как resolution (добавьте min- или max- по вкусу). Тем кому не нравится 96dpi добавили единицу измерения dppx.
                          А собственно описываемое в заметке поведение уже имеется как таковое в Internet Explorer 9+ и Firefox.
                          • UFO just landed and posted this here
                              0
                              Ну лично я за resolution просто потому что оно короче неуклюжего device-pixel-ratio, да и лучше описывает суть, не говоря уж о совместимости с единицами измерения CSS.
                              • UFO just landed and posted this here
                          +2
                          Мицгол, спасибо вам за статьи, они всегда интересные, но хотел бы написать и своё «фу». Вы очень много внимания уделяете переводу терминов, но одновременно пишите «Peter-Paul Koch», «Android» и «Galaxy Nexus». За этим стоит какая-то логика?
                            –1
                            Вотъ когда мнѣ доведётся записывать блогозаписи цѣликомъ Имперскою Рѣчью, тогда Вы въ нихъ увидите «Петропавелъ Кохъ», «Андроидъ» и «Гэлэкси Нэксусъ». Тогда, но врядъ ли ранѣе. Довольно покамѣстъ и того, что въ косвенномъ падежѣ я и сейчасъ ужъ пишу объ «Андроидѣ» и о «Нэксусѣ» кириллицею.

                          Only users with full accounts can post comments. Log in, please.