Come posso trovare una pagina web spettatori pixel per pollice?

Question

Qualcuno può pensare a un modo per scoprire un utente pixel per pollice? Voglio assicurare che un'immagine si apre con un browser web esattamente la dimensione ho bisogno di, in modo da utilizzare una combinazione di risoluzione (che posso ottenere da user agent) e pixel per pollice che potevo fare questo.

Tuttavia, non sono sicuro se c'è un modo per scoprire un utente pixel per pollice, preferibilmente utilizzando JavaScript o qualche altro metodo non invasivo.

Qualche suggerimento?

Grazie,

CJ

Answer 1

È possibile utilizzare la seguente funzione javascript per ottenere il 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>

Tuttavia, credo che sarà sempre tornare 96 su macchine Windows.

Per quanto ne so, non c'è modo per il sistema operativo per determinare le dimensioni fisiche effettive della finestra. Quindi, potrebbe benissimo essere che in realtà è impossibile per il software di conoscere la vita reale DPI.

Tuttavia, i professionisti sono alcune filiali assicurarsi che il sullo schermo DPI corrisponde al vita reale DPI. In questi casi il sopra javascript sarebbe probabilmente sufficiente.

Nota:
Testato il codice di cui sopra in Opera 9, IE6 e 7 e Firefox 3.6 su WinXP e Win2k.

Aggiornamento:
Aggiunto il parametro nocache. Ma dubito che avrà alcun effetto. L'ho provato con lo zoom in Firefox e Opera sulle versioni di Windows di cui sopra e che mantengano citando il DPI come '96', indipendentemente dalla quantità di zoom. Sarebbe interessante vedere cosa i dispositivi mobili fanno di questo.

Answer 2

Si potrebbe fare come i pacchetti di disegno del vecchio ha fatto, e visualizzare un righello estensibile. Avere gli utenti trascinano il righello virtuale fino a che non corrisponde a un righello fisica hanno messo contro lo schermo.

Non è una seria proposta per l'uso in produzione, ma probabilmente l'unico modo per ottenere effettivamente la risposta giusta:. (

Answer 3

Il più sicuro e più facile sarebbe quella di dire al browser quali dimensioni desiderate dell'immagine. CSS supporta pollici e metriche, quindi si può specificare l'immagine come uno di questi esempi:

<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

Displays oggi il supporto 96px / pollice o 72pixels / pollice .

È possibile ottenere l'intestazione della richiesta HTTP User-Agent

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

questo vi dirà il sistema operativo e da qui si può prendere una decisione.

Answer 5

Questo può essere molto difficile - anche se si riesce in qualche modo a scalare l'immagine di rendering sulla base di dpi, come si fa a impedire all'utente di scalare l'immagine nel proprio browser direttamente?

Avete preso in considerazione alcune ricche tecnologie di interfaccia come Flash o Silverlight? Essi possono darvi ulteriori opzioni.