Le densità dei pixel influiscono sul posizionamento degli elementi su vari dispositivi?

Question

Sto costruendo una presentazione personalizzata e voglio che i miei controlli diapositiva siano sempre in una determinata posizione nella parte inferiore della finestra. Per realizzare questo sto usando jQuery e impostando la proprietà superiore del div contenente i controlli allo window height - 50px.

La mia domanda è, se il sito viene visualizzato su un dispositivo con un'alta densità di pixel, questo approccio funziona ancora? Non ho nulla da testare e apprezzare qualsiasi feedback. Nella mia mente penso che se un dispositivo ha un'alta densità di pixel, lo 50px lo sposterà solo leggermente, ma spero di sbagliarmi.

Answer 1

La densità di pixel può influire sull'aspetto, ma non sul layout. La densità dei pixel è in generale un aspetto molto, molto minore e viene gestita dai driver video e dal sistema operativo piuttosto che dai CSS direttamente. Inizialmente è normale che le aziende pubblicizzino la densità dei pixel come un modo per differenziare il loro prodotto, ma questo non significa che sia una novità.

Tutti i PC, laptop, tavoli, telefoni e TV con la stessa risoluzione ma dimensioni dello schermo diverse (anche solo proporzioni diverse) hanno densità di pixel differenti. Mentre dobbiamo prendere in considerazione diverse risoluzioni, non dobbiamo considerare la densità dei pixel.

Sebbene non sia esclusivamente una scelta di caratteri di densità di pixel, uno degli aspetti dello stile potrebbe essere influenzato. Un carattere che un sintonizzatore finemente renderizzato su un determinato schermo (così come sul browser e sul sistema operativo) potenzialmente non apparirà altrettanto buono sugli altri. Ci sono molti fattori oltre alla semplice densità di pixel in gioco qui, come il rendering di sub-pixel.

La linea di fondo è la stessa che è stata per un po '. Progetta il tuo contenuto; testarlo accuratamente su diversi dispositivi (se possibile) e si dovrebbe andare bene.

Answer 2

CSS px unità non sono pixel.

Questo include il loro uso in jQuery. px unità non corrispondono direttamente ai pixel fisici sul display.

w3.org ha a page that explains px and other CSS units:

Il px unità è l'unità magia del CSS. Non è correlato al carattere corrente e non è correlato alle unità assolute. L'unità px è definita come piccola ma visibile e tale che una linea orizzontale di 1px può essere visualizzata con spigoli vivi (senza anti-aliasing). Ciò che è nitido, piccolo e visibile dipende dal dispositivo e dal modo in cui viene utilizzato: lo tieni vicino agli occhi, come un telefono cellulare, a una lunghezza di braccia, come un monitor di un computer, o da qualche parte nel mezzo, come un libro? Il px px non è quindi definito come una lunghezza costante, ma come qualcosa che dipende dal tipo di dispositivo e dal suo uso tipico.

Per avere un'idea della comparsa di un px, immaginare un monitor di un computer CRT dal 1990: il più piccolo punto è possibile visualizzare le misure circa 1/100th di un pollice (0,25 millimetri), o un po 'di più. L'unità px ha ottenuto il suo nome da quei pixel dello schermo.

Al giorno d'oggi ci sono dispositivi che potrebbero in teoria visualizzare piccoli punti nitidi (anche se potrebbe essere necessario un ingranditore per vederli).Ma i documenti del secolo scorso che utilizzavano px in CSS sembrano uguali, indipendentemente dal dispositivo. Le stampanti, in particolare, sono in grado di visualizzare linee nitide con dettagli molto più piccoli di 1px, ma anche su stampanti, una linea da 1px sembra molto simile a quella che apparirebbe sul monitor di un computer. I dispositivi cambiano, ma il px px ha sempre lo stesso aspetto visivo.

altro modo di pensare di questo è che CSS px is an Angular Measurement:

“unità pixel sono relative alla risoluzione del dispositivo di visualizzazione, cioè, più spesso un visualizzatore del computer. Se la densità dei pixel del dispositivo di output è molto diversa da quella di un tipico display del computer, l'interprete dovrebbe ridimensionare i valori dei pixel. Si raccomanda che il pixel di riferimento sia l'angolo visivo di un pixel su un dispositivo con una densità di pixel di 96 dpi e una distanza dal lettore di una lunghezza di braccio. Per la lunghezza di un braccio nominale di 28 pollici, l'angolo di visuale è quindi di circa 0,0213 gradi.”

Così la vostra -50px dovrebbe apparire visivamente per essere approssimativamente la stessa dimensione su qualsiasi dispositivo. Il numero effettivo di pixel che corrisponde dipenderà dalla densità dei pixel del dispositivo, dalla distanza dal dispositivo agli occhi dell'utente e dalla personalizzazione dell'utente.