Как я могу узнать зрителей веб-страницы пикселей на дюйм?

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

Тем не менее, я не уверен, есть ли какой-нибудь способ обнаружить пиксели пользователя на дюйм, в идеале, используя JavaScript или другой неинвазивный метод.

Какие-либо предложения?

Спасибо,

CJ

5 ответов

Решение

Вы можете использовать следующую функцию javascript, чтобы получить DPI.

<script type="text/javascript">
   var dpi = {
      v: 0,
      get: function (noCache) {
         if (noCache || dpi.v == 0) {
            e = document.body.appendChild(document.createElement('DIV'));
            e.style.width = '1in';
            e.style.padding = '0';
            dpi.v = e.offsetWidth;
            e.parentNode.removeChild(e);
         }
         return dpi.v;
      }
   }

    alert(dpi.get(true));  // recalculate
    alert(dpi.get(false)); // use cached value
</script>

Тем не менее, я думаю, что он всегда вернется 96 на окнах машин.

Насколько я знаю, операционная система не может определить реальные физические размеры области просмотра. Таким образом, вполне возможно, что для программного обеспечения фактически невозможно узнать реальный DPI.

Тем не менее, профессионалы некоторых отраслей должны убедиться, что отображаемый DPI соответствует реальному DPI. В этих случаях вышеупомянутого javascript, вероятно, будет достаточно.

Замечания:
Протестировал приведенный выше код в Opera 9, IE6 & 7 и Firefox 3.6 на WinXP и Win2k.

Обновить:
Добавлен параметр noCache. Но я сомневаюсь, что это будет иметь какое-либо влияние. Я протестировал его с увеличением в FireFox и Opera на вышеупомянутых версиях Windows, и они продолжают указывать DPI как 96, независимо от величины увеличения. Было бы интересно посмотреть, что из этого делают мобильные устройства.

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

Не серьезное предложение для производственного использования, но, вероятно, единственный способ получить правильный ответ:(.

Самым безопасным и простым было бы сообщить браузеру, какой размер изображения вы хотите. CSS поддерживает дюймы и метрики, поэтому вы можете указать изображение, как в любом из следующих примеров:

<img src="image.png" style="width:15cm;height:10cm;" alt="Centimeters" />
<img src="image.png" style="width:5.9in;height:3.9in;" alt="Inches" />
<img src="image.png" style="width:150mm;height:100mm;" alt="Millimeters" />

Это может быть очень сложно - даже если вам как-то удастся масштабировать визуализированное изображение на основе dpi, как вы запретите пользователю масштабировать изображение в своем браузере напрямую?

Рассматривали ли вы некоторые богатые технологии интерфейса, такие как flash или Silverlight? Они могут дать вам дополнительные возможности.

Дисплеи сегодня поддерживают 96px/inch или 72pixels / inch.

Вы можете получить HTTP-запрос заголовка User-Agent

User-Agent: Mozilla/5.0 (Linux; X11)

этот расскажет вам операционную систему, и отсюда вы можете принять решение.

Другие вопросы по тегам