window.pixelRatio не работает в Opera. Любая альтернатива?

Question

Я работаю над тем, чтобы наша CMS экспортировала действительный контент для мобильных устройств.Одна из проблем, с которой мы столкнулись, заключалась в том, что более новые устройства, такие как iphone4, имеют дисплей с более высоким разрешением, поэтому нам нужно было найти способ правильно отображать одну и ту же страницу на старых устройствах и более новых, которые используют дисплей с разрешением 300 точек на дюйм.До сих пор мы использовали javascript и window.devicePixelRatio, чтобы получить разрешение в dpi, но оказалось, что это не работает в опере (?) И опере моб.Я немного исследовал, но не смог найти что-нибудь.

Спасибо

Answer 1

Я думаю, вы можете неправильно понять, что на самом деле вам говорит devicePixelRatio - удивительно, пиксель - это не пиксель!

Когда вы указываете размер пикселя в CSS, выне обязательно указание размера в физических пикселях.Вместо этого модуль CSS px на самом деле представляет собой «независимый от устройства пиксель» (DIP), который относительно относительно DPI устройства:

Пиксельные единицы являются относительнымиразрешение устройства просмотра, т. е. чаще всего дисплей компьютера.Если плотность пикселей устройства вывода сильно отличается от плотности изображения на обычном дисплее компьютера, пользовательский агент должен масштабировать значения пикселей.

Эталонный пиксель определяется как 96 точек на дюйм (настройка DPI по умолчанию в Windows), поэтомуваш компьютер, правда, что 1 DIP (CSS px) = 1 физический пиксель экрана.Кроме того, хотя старые устройства iOS имеют физический DPI 163, они по-прежнему используют 1 DIP = 1 пиксель.Однако на удвоенном разрешении iPhone 4, равном 326 DPI, 1 DIP = 2 пикселя экрана, о чем devicePixelRatio = 2 говорит вам.

Таким образом, строго говоря о разнице между iPhone 3 и iPhone 4,Элемент HTML со стилем { width:100px; height:100px; } должен отображаться примерно одинакового размера на старых устройствах и на iPhone 4 с более высоким разрешением, поскольку он изменяет размеры пикселей.

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

Answer 2

Opera Mobile пока не имеет devicePixelRatio, поскольку это в значительной степени нестандартное расширение, добавленное Apple. Однако мы планируем добавить это, и, возможно, в следующем выпуске Opera Mobile это произойдет. Вам не нужно использовать JS для этого как бы то ни было. Он также должен работать в медиа-запросе с отношением пикселей к устройству (с префиксами поставщика).

Answer 3

Привет всем,

josh3736 дал очень хороший и краткий ответ на проблему пикселей css и устройства.Я просто хотел добавить, что проблема с большими изображениями высокой четкости, по-видимому, является проблемой, которую, возможно, придется обслуживать более конкретно для отдельных спецификаций устройств dpi или ppi.Выполняя поиск в Google, я обнаружил, что другие (пытаются?) Используют соотношение пикселей и устройств в качестве основы для изменения размера изображений для дисплеев с высоким разрешением, при этом сохраняя исходное высокое разрешение.изображение доступно для этих устройств и обеспечивает низкое разрешение.изображения для мобильных телефонов без дисплеев с высоким разрешением.Таким образом, изображение для этих устройств более высокого качества, но выглядит одинаково по сравнению с остальной частью страницы в спектре пользовательских устройств.

Кажется, что возможность масштабирования делает это более полезным,так как пользователь может увеличить на высокой четкости.изображения и получить повышенную детализацию.Конечно, это добавляет еще один уровень сложности для решения, но это может быть важно для решения, так как у нас появляется все больше и больше новых высокопроизводительных устройств, выходящих на рынки.Все еще изучаете это, так что пишите, если у кого есть хорошие примеры.