Pull to refresh

Comments 31

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

if (typeof window.devicePixelRatio != 'undefined') {
   if (window.devicePixelRatio > 1) {
      // ретина!
   }
} 
Внимательный читатель наверняка сообразит, что у Хмелёва третий пример ужé включает аналогичную проверку, но только в другой форме:

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


Способ Крэя более пригоден «на вырост» в том смысле, что если развитие техники приведёт к появлению устройств со значением «window.devicePixelRatio == 4», то для них всё равно неплохо бы подзакачать хотя бы удвоенную в размере картинку.
В данном случае проверка не нужна.
undefined кастуется в NaN в предикатах сравнения, ну и собственно это даёт в результате неизвестное поведение, которое всегда трактуется как false.
Это по стандарту и не должно быть browser-specific.
С другой стороны это фишка, и не все могут о ней знать, поэтому можно например воткнуть комментарий.
Но в данном случае я сомневаюсь, что автор знал об этом, так как использует абсолютно бессмысленный в данном случае тернарный оператор сравнения. Бессмысленный потому что предикаты сравнения всегда возвращают boolean.
Спасибо за ценный комментарий. Я как-то не был осведомлён об этой небезынтересной особенности джаваскриптовых сравнений чисел с несуществующими полями объектов.
Имхо, можно проще:

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

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

var retina = function(x){ return !!x && !!(x-1); }(window.devicePixelRatio);
Как ни странно, проверка на undefined и тут не нужна, потому что в джаваскрипте !!NaN принимает значение false.

Это и к лучшему, потому что, честное слово, уж лучше вслед за Крэем записать слишком самоочевидную формулировку ««? true: false», нежели опускаться в такие круги ада, как «function(x){ return !!x && !!(x-1); }(window.devicePixelRatio)».
Собсно, в данном конкретном случае, согласен, не обратил внимание и вполне будет достаточно var retina = window.devicePixelRatio > 1;
Простите, а зачем «? true: false»?
var retina = window.devicePixelRatio > 1;
Да, это наиболее странное место первоисточника; я полагаю, что Крэй поставил булевые константы для наглядности, граничащей с очевидностью.
Теперь переменная retina примет значение true [...]
«Абалдееть!»©

В дальнейшем можно использовать простой оператор if, чтобы выполнить тот или иной код в зависимости от типа дисплея.
По-моему, тут уже наглядность граничит не с очевидностью, а даже не знаю с чем. Может все же стоило немного адаптировать перевод?
Хе-хе-хе. Может быть. Но я решил оставить авторский стиль глубокого разжёвывания.
«Ретиновый дисплей» — недостаточно русский термин. «Сетчатковый экран» звучит куда более мицгольно.
Ваше наблюдение справедливо. Перехожу на употребление словосочетания «сетчаточный дисплей». (Я ничего не имею против термина «дисплей» в значении «экран бытовой цифровой техники».)
Считаю предложение использовать вражеское слово «экран» не совсем уместным и предлагаю в рамках треда в качестве замены использовать слова «казатель», вариант «показчик».
Может все-таки «сетчатый»? А то слух режет.
«Сетчатый» — от слова «сетка», а «сетчаточный» — от слова «сетчатка» («retina»).
UFO landed and left these words here
Производители принтеров достаточно давно используют термин «ретинальный». Из того, что я слышал, мне этот вариант нравится больше всех.
мда… почему бы это не делать на CSS? У нас же могут быть разные стили для разных разрешений.
Для тех кто использует responsive webdesign это не есть проблема.
Вы предлагаете заменить картинку в элементе «img» посредством CSS? Ну-ну… Посредством CSS можно менять стили, но не разметку.
Там не CSS, там JavaScript + серверное перенаправление.
Иногда случается необходимость адаптировать к сетчаточному дисплею не только оформление, но и движок.

Вот пример на GitHub.
UFO landed and left these words here
100 на 100 в браузерных пикселях, а на retina в одном браузерном пикселе — 4 настоящих. Собственно window.devicePixelRatio за информирование о такой ситуации и отвечает.
Чрезвычайно интересно, как сайты, учитывающие подобным образом window.devicePixelRatio и его CSS-аналоги, будут работать в системах, где devicePixelRatio=1.51.
А и такие системы есть? Или хотя бы проектируются?
Хм, ну, мой ноутбук, например, имеет экран со 145 DPI в течение последних примерно пяти лет. А если разделить 145 на 96, получится как раз столько.

У предыдущего, кстати, было 125 DPI. И значение этой константы, получается, должно было бы быть 1.3. Примерно.
Ради интереса, посмотрел на спеки известных устройств и посчитал, каково бы должно быть для них значение 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)
Only those users with full accounts are able to leave comments. Log in, please.