окно.pixelRatio не работает в опере. Есть альтернатива?

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

Любые намеки или, может быть, другой подход? Я исследовал немного, но не смог найти что-то новое.

Спасибо

3 2
javascript android mobile-website

3 ответа:

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

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

Пиксельные единицы измерения относительны к разрешающей способности устройства просмотра, то есть чаще всего компьютерного дисплея. Если плотность пикселей устройства вывода сильно отличается от плотности пикселей обычного компьютерного дисплея, агент пользователя должен масштабировать значения пикселей. Опорный пиксель определяется как 96dpi (настройка DPI Windows по умолчанию), поэтому на вашем компьютере верно, что 1 DIP (CSS px) = 1 физический пиксель экрана. Кроме того, несмотря на то, что более старые устройства iOS имеют физический DPI 163, они по-прежнему используют 1 DIP = 1 пиксель. Однако на iPhone 4 удвоенное разрешение 326 точек на дюйм, 1 DIP = 2 пикселя экрана, что это то, что devicePixelRatio = 2 говорит вам. Таким образом, строго говоря о разнице между iPhone 3 и iPhone 4, HTML-элемент со стилем { width:100px; height:100px; } должен отображаться примерно в том же размере на старых устройствах и на iPhone 4 с более высоким разрешением, так как он масштабирует значения пикселей.

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

6

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

3

Привет всем,

Josh3736 дал очень хороший и краткий ответ на проблему css vs device pixel. Просто хотел добавить, что это, кажется, проблема с большими изображениями высокой четкости, которые могут быть поданы более конкретно для отдельных спецификаций устройств dpi или ppi. поиск google, я обнаружил, что другие (пытаются?) используя соотношение "устройство-пиксель" в качестве основы для изменения размера изображений меньшего размера для дисплеев с высоким ppi, сохраняя при этом исходное высокое разрешение. изображение, доступное для этих устройств и обеспечивать низкий def. изображения для мобильных телефонов без дисплеев с высоким разрешением. Таким образом, изображение имеет более высокое качество для этих устройств, но выглядит одинаково по размеру относительно остальной части страницы во всем спектре пользовательских устройств.

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

1