Комментарии 31
При переводе я позволил себе отредактировать последний из примеров кода, потому что в первоисточнике не слишком-то понятно, о чём речь. Вообще же рекомендую заинтересованным читателям рассматривать этот перевод как практический рецепт к теоретической статье Егора Хмелёва «Адаптируем графику под Retina экран» и читать сперва её, хотя Брайан Крэй и опубликовал свою блогозапись куда раньше (5 мая 2011 года). Крэй также не обращает внимания на необходимость проверки существования свойства window.devicePixelRatio, тогда как в действительности она понадобится:
if (typeof window.devicePixelRatio != 'undefined') {
if (window.devicePixelRatio > 1) {
// ретина!
}
}
Внимательный читатель наверняка сообразит, что у Хмелёва третий пример ужé включает аналогичную проверку, но только в другой форме:
Способ Крэя более пригоден «на вырост» в том смысле, что если развитие техники приведёт к появлению устройств со значением«window.devicePixelRatio == 4», то для них всё равно неплохо бы подзакачать хотя бы удвоенную в размере картинку.
if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){
// ретина!
}
Способ Крэя более пригоден «на вырост» в том смысле, что если развитие техники приведёт к появлению устройств со значением
В данном случае проверка не нужна.
undefined кастуется в NaN в предикатах сравнения, ну и собственно это даёт в результате неизвестное поведение, которое всегда трактуется как false.
Это по стандарту и не должно быть browser-specific.
С другой стороны это фишка, и не все могут о ней знать, поэтому можно например воткнуть комментарий.
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)».
Это и к лучшему, потому что, честное слово, уж лучше вслед за Крэем записать слишком самоочевидную формулировку
НЛО прилетело и опубликовало эту надпись здесь
Теперь переменная retina примет значение true [...]«Абалдееть!»©
В дальнейшем можно использовать простой оператор if, чтобы выполнить тот или иной код в зависимости от типа дисплея.По-моему, тут уже наглядность граничит не с очевидностью, а даже не знаю с чем. Может все же стоило немного адаптировать перевод?
Хе-хе-хе. Может быть. Но я решил оставить авторский стиль глубокого разжёвывания.
«Ретиновый дисплей» — недостаточно русский термин. «Сетчатковый экран» звучит куда более мицгольно.
Ваше наблюдение справедливо. Перехожу на употребление словосочетания «сетчаточный дисплей». (Я ничего не имею против термина «дисплей» в значении «экран бытовой цифровой техники».)
мда… почему бы это не делать на CSS? У нас же могут быть разные стили для разных разрешений.
Для тех кто использует responsive webdesign это не есть проблема.
Для тех кто использует responsive webdesign это не есть проблема.
Вы предлагаете заменить картинку в элементе «img» посредством CSS? Ну-ну… Посредством CSS можно менять стили, но не разметку.
Читаем filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/ и восхищаемся.
Иногда случается необходимость адаптировать к сетчаточному дисплею не только оформление, но и движок.
Вот пример на GitHub.
Вот пример на GitHub.
НЛО прилетело и опубликовало эту надпись здесь
Чрезвычайно интересно, как сайты, учитывающие подобным образом window.devicePixelRatio и его CSS-аналоги, будут работать в системах, где devicePixelRatio=1.51.
А и такие системы есть? Или хотя бы проектируются?
Хм, ну, мой ноутбук, например, имеет экран со 145 DPI в течение последних примерно пяти лет. А если разделить 145 на 96, получится как раз столько.
У предыдущего, кстати, было 125 DPI. И значение этой константы, получается, должно было бы быть 1.3. Примерно.
У предыдущего, кстати, было 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)
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)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Распознаём retina-дисплеи джаваскриптом