Como posso descobrir os visualizadores de uma página da web por polegada?

Question

Alguém pode pensar em uma maneira de descobrir pixels de usuários por polegada? Quero garantir que uma imagem seja exibida em um navegador da web exatamente O tamanho que eu preciso, portanto, usando uma combinação de resolução (que eu posso obter do agente do usuário) e pixels por polegada, eu poderia fazer isso.

No entanto, não tenho certeza se existe alguma maneira de descobrir pixels de usuários por polegada, idealmente usando JavaScript ou algum outro método não invasivo.

Alguma sugestão?

Obrigado,

CJ

Answer 1

Você pode usar a seguinte função JavaScript para obter o 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>

No entanto, acho que sempre retornará 96 em máquinas Windows.

Até onde eu sei, não há como o sistema operacional determinar as dimensões físicas reais da viewport. Portanto, pode muito bem ser que seja realmente impossível para o software conhecer o DPI da vida real.

No entanto, os profissionais são certos ramos, certifique-se de que o DPI na tela corresponda ao DPI da vida real. Nesse caso, o JavaScript acima provavelmente seria suficiente.

Observação:
Testou o código acima na Opera 9, IE6 e 7 e Firefox 3.6 no WinXP e Win2K.

Atualizar:
Adicionado o param nocache. Mas duvido que isso tenha algum efeito. Eu o testei com zoom no Firefox e Opera nas versões do Windows acima mencionadas e elas continuam citando o DPI como '96', independentemente da quantidade de zoom. Seria interessante ver o que os dispositivos móveis fazem disso.

Answer 2

Você pode fazer o que os pacotes de desenho de antigos fizeram e exibir uma régua elástica. Peça aos seus usuários arrastar a régua virtual até que ele corresponda a uma régua física que eles colocaram na tela.

Não é uma sugestão séria para o uso da produção, mas provavelmente a única maneira de obter a resposta certa :(.

Answer 3

O mais seguro e mais fácil seria dizer ao navegador qual o tamanho que você deseja a imagem. O CSS suporta Inch e Métricas, para que você possa especificar a imagem como qualquer um desses exemplos:

<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" />

Answer 4

Exibe hoje suporta 96px/polegada ou 72pixels/polegada .

Você pode obter o cabeçalho do usuário-agente de solicitação HTTP

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

Este lhe dirá o sistema operacional e daqui você pode tomar uma decisão.

Answer 5

Isso pode ser muito difícil - mesmo que você consiga escalar a imagem renderizada com base no DPI, como você impede que o usuário escala a imagem diretamente no navegador?

Você já considerou algumas tecnologias de interface ricas como Flash ou Silverlight? Eles podem oferecer opções adicionais.