Распознаём retina-дисплеи джаваскриптом

[Mithgol]

При переводе я позволил себе отредактировать последний из примеров кода, потому что в первоисточнике не слишком-то понятно, о чём речь. Вообще же рекомендую заинтересованным читателям рассматривать этот перевод как практический рецепт к теоретической статье Егора Хмелёва «Адаптируем графику под Retina экран» и читать сперва её, хотя Брайан Крэй и опубликовал свою блогозапись куда раньше (5 мая 2011 года). Крэй также не обращает внимания на необходимость проверки существования свойства window.devicePixelRatio, тогда как в действительности она понадобится:

if (typeof window.devicePixelRatio != 'undefined') {
   if (window.devicePixelRatio > 1) {
      // ретина!
   }
} 

[Mithgol]

Внимательный читатель наверняка сообразит, что у Хмелёва третий пример ужé включает аналогичную проверку, но только в другой форме:

if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){
   // ретина!
}

Способ Крэя более пригоден «на вырост» в том смысле, что если развитие техники приведёт к появлению устройств со значением «window.devicePixelRatio == 4», то для них всё равно неплохо бы подзакачать хотя бы удвоенную в размере картинку.

[mark_ablov]

В данном случае проверка не нужна.
undefined кастуется в NaN в предикатах сравнения, ну и собственно это даёт в результате неизвестное поведение, которое всегда трактуется как false.
Это по стандарту и не должно быть browser-specific.
С другой стороны это фишка, и не все могут о ней знать, поэтому можно например воткнуть комментарий.

[mark_ablov]

Но в данном случае я сомневаюсь, что автор знал об этом, так как использует абсолютно бессмысленный в данном случае тернарный оператор сравнения. Бессмысленный потому что предикаты сравнения всегда возвращают boolean.

[Mithgol]

Спасибо за ценный комментарий. Я как-то не был осведомлён об этой небезынтересной особенности джаваскриптовых сравнений чисел с несуществующими полями объектов.

[demark]

Имхо, можно проще:

var retina = !!(window.devicePixelRatio-1);

// и вариант с проверкой на undefined

var retina = function(x){ return !!x && !!(x-1); }(window.devicePixelRatio);

[Mithgol]

Как ни странно, проверка на undefined и тут не нужна, потому что в джаваскрипте !!NaN принимает значение false.

Это и к лучшему, потому что, честное слово, уж лучше вслед за Крэем записать слишком самоочевидную формулировку ««? true: false», нежели опускаться в такие круги ада, как «function(x){ return !!x && !!(x-1); }(window.devicePixelRatio)».

[demark]

Собсно, в данном конкретном случае, согласен, не обратил внимание и вполне будет достаточно var retina = window.devicePixelRatio > 1;

[Mithgol]

Да, это наиболее странное место первоисточника; я полагаю, что Крэй поставил булевые константы для наглядности, граничащей с очевидностью.

[JhaoDa]

Теперь переменная retina примет значение true [...]

«Абалдееть!»©

В дальнейшем можно использовать простой оператор if, чтобы выполнить тот или иной код в зависимости от типа дисплея.

По-моему, тут уже наглядность граничит не с очевидностью, а даже не знаю с чем. Может все же стоило немного адаптировать перевод?

[Mithgol]

Хе-хе-хе. Может быть. Но я решил оставить авторский стиль глубокого разжёвывания.

[Archon]

«Ретиновый дисплей» — недостаточно русский термин. «Сетчатковый экран» звучит куда более мицгольно.

[Mithgol]

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

[Vokabre]

Отображатель!

[conf]

Может все-таки «сетчатый»? А то слух режет.

[Mithgol]

«Сетчатый» — от слова «сетка», а «сетчаточный» — от слова «сетчатка» («retina»).

[Tunecatcher]

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

[simonoff]

мда… почему бы это не делать на CSS? У нас же могут быть разные стили для разных разрешений.
Для тех кто использует responsive webdesign это не есть проблема.

[Serator]

Вы предлагаете заменить картинку в элементе «img» посредством CSS? Ну-ну… Посредством CSS можно менять стили, но не разметку.

[simonoff]

Читаем filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/ и восхищаемся.

[Mithgol]

Там не CSS, там JavaScript + серверное перенаправление.

[Mithgol]

Иногда случается необходимость адаптировать к сетчаточному дисплею не только оформление, но и движок.

Вот пример на GitHub.

[MihailOlenin]

100 на 100 в браузерных пикселях, а на retina в одном браузерном пикселе — 4 настоящих. Собственно window.devicePixelRatio за информирование о такой ситуации и отвечает.

[Honeyman]

Чрезвычайно интересно, как сайты, учитывающие подобным образом window.devicePixelRatio и его CSS-аналоги, будут работать в системах, где devicePixelRatio=1.51.

[Mithgol]

А и такие системы есть? Или хотя бы проектируются?

[Honeyman]

Хм, ну, мой ноутбук, например, имеет экран со 145 DPI в течение последних примерно пяти лет. А если разделить 145 на 96, получится как раз столько.

У предыдущего, кстати, было 125 DPI. И значение этой константы, получается, должно было бы быть 1.3. Примерно.

[Honeyman]

Ради интереса, посмотрел на спеки известных устройств и посчитал, каково бы должно быть для них значение devicePixelRatio, если всё делать по уму (в сторону: впрочем, если всё делать по уму, то в CSS не надо было в своё время привязывать пиксель к дюйму, потому что один кривой костыль для одного кривого дефолта в одной кривой системе вызывает впоследствии, как мы видим, целый костылепромышленный завод):

Nexus One: 2.65
Nexus S: 2.43
Galaxy Nexus: 3.29

iPhone 3G/3Gs: 1.70
iPhone 4/4s: 3.40 (и нифига не 4)
iPad 1/2: 1.38
«the new iPad»: 2.75 (и ещё дальше от 4, чем iPhone 4)