Обнаружение системы DPI/PPI от JS/CSS?
Я работаю над своего рода уникальным приложением, которое должно генерировать изображения в определенных разрешениях согласно устройству, на котором они отображены. Таким образом, вывод отличается на регулярном браузере Windows (96 пкс/дюйм), iPhone (163 пкс/дюйм), Android G1 (180ppi) и другие устройства. Я задаюсь вопросом, существует ли способ обнаружить это автоматически.
Мое начальное исследование, кажется, говорит "нет". Единственное предложение, которое я видел, состоит в том, чтобы сделать элемент, ширина которого указана как "1 дюйм" в CSS, затем проверьте его offsetWidth (см. также, Как получить доступ к настройкам DPI отображения на экране с помощью JavaScript?). Имеет смысл, но iPhone лжет мне с той техникой, говоря, что это - 96 пкс/дюйм.
Другой подход мог бы быть должен получить размеры дисплея в дюймах и затем разделиться на ширину в пикселях, но я не уверен, как сделать это также.
4 ответа
Я думаю, что Ваш лучший подход должен объединить предложение изображения "сниффера" с матрицей известных точек на дюйм для устройств (через агент пользователя и другие методы). Это не будет точно и будет болью для поддержания, но не зная больше о приложении, которое Вы пытаетесь сделать, это - лучшее предложение, которое я могу предложить.
DPI по определению связывается с физическим размером дисплея. Таким образом, Вы не будете в состоянии иметь реальный DPI, не зная точно аппаратные средства позади.
современные Ose договорились об общей ценности для имения совместимых дисплеев: 96 точек на дюйм. Это - позор, но это - факт.
необходимо будет полагаться на сниффинг, чтобы быть в состоянии предположить, что реальный размер экрана должен был вычислить разрешение (DPI = PixelSize / ScreenSize).
Разве Вы не можете сделать ничего больше? Например, при генерации изображения, которое будет распознано камерой (т.е. Вы запускаете свою программу, сильно ударяете Ваш сотовый телефон через камеру, волшебство происходит), разве Вы не можете использовать что-то независимое от размера?
, Если это приложение должно быть развернуто в управляемых средах, можно ли обеспечить калибровочную утилиту? (Вы могли сделать что-то простым как визитные карточки печати с маленькой линейкой в нем, использовать его во время калибровочного процесса).
Мне также нужно было отображать одно и то же изображение того же размера с разным разрешением экрана, но только для Windows IE. Я использовал:
<img src="image.jpg" style="
height:expression(scale(438, 192));
width:expression(scale(270, 192))" />
function scale(x, dpi) {
// dpi is for orignal dimensions of the image
return x * screen.deviceXDPI/dpi;
}
В этом случае исходная ширина / высота изображения 270 и 438, и изображение было проявлено на экране с разрешением 192 точек на дюйм. screen.deviceXDPI не определен в Chrome, и функцию масштабирования необходимо обновить для поддержки браузеров, отличных от IE