Обнаружение системы DPI / PPI из JS / CSS?

Question

Я работаю над своего рода уникальным приложением, которое должно генерировать изображения с определенным разрешением в соответствии с устройством, на котором они отображаются. Таким образом, вывод отличается на обычном браузере Windows (96ppi), iPhone (163ppi), Android G1 (180ppi) и других устройствах. Мне интересно, есть ли способ обнаружить это автоматически.

Кажется, мое первоначальное исследование говорит «нет». Единственное предложение, которое я видел, это сделать элемент, ширина которого в CSS указана как «1 дюйм», а затем проверить его offsetWidth (см. Также Как получить доступ к настройкам DPI экрана на экране через javascript? ). Имеет смысл, но iPhone лжет мне с этой техникой, говоря, что это 96ppi.

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

Answer 1

Создание списка известных DPI: https://stackoverflow.com/a/6793227

Определить точное устройство. Используя что-то вроде:

navigator.userAgent.toLowerCase();

Например, при обнаружении мобильного телефона:

window.isMobile=/iphone|ipod|ipad|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase());

И прибыль!

Answer 2

Разве ты не можешь сделать что-нибудь еще? Например, если вы генерируете изображение, которое будет распознано камерой (т.е. вы запускаете свою программу, проводите свой мобильный телефон по камере, случается волшебство), вы не можете использовать что-то независимое от размера?

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