PPI o pixel o qualcos'altro per mediaquery su schermi HD?

Sto facendo un po 'di scarabocchiare con un design reattivo (Finalmente, giusto?) E mi sono posto una domanda mentre stavo usando le media query: "Cosa succede quando lo uso su uno schermo retina?".PPI o pixel o qualcos'altro per mediaquery su schermi HD?

Così ho iniziato a chiedermi se è ancora corretto usare i pixel quando si scelgono gli schermi HD. Voglio dire, @media only screen and (min-width: 5 billion px) sembra una cosa stupida da fare.

Quindi mi sono chiesto quale sia la migliore pratica. La scala PX su schermi HD? O dovrei usare DPI o device-pixel-ratio o forse qualcosa di completamente diverso?

Il mio obiettivo è indirizzare praticamente tutti gli schermi per una pagina solo per dispositivi mobili. Puro per scopi pratici e vedere da solo ciò che è possibile e logico.

La mia domanda è praticamente la seguente: come posso indirizzare gli schermi HD oltre agli schermi "normali" in una soluzione a tutto tondo in cui posso fare eccezioni sia per gli HD che per i normali schermi def costruiti per "il futuro".

fonte

2013-03-18 CaptainCarl

@dystroy se si prevede di cambiare il mio titolo. Per favore non fare errori di battitura! ;-) – CaptainCarl

Ci sono persone molto invadenti con il lavoro degli altri :( –

Ci scusiamo per l'errore di battitura, ma temevo che la tua domanda sarebbe stata chiusa perché vagamente titolando "best practice" è un modo sicuro per essere chiusi come non costruttivi –

Di solito si utilizzano unità relative come em o %.

Ad esempio, se tutto nella pagina utilizza em, la modifica dello font-size del corpo ridimensionerà automaticamente ogni elemento in proporzione alla dimensione del carattere.

In altre parole: è necessario codificare le query multimediali per gli intervalli di risoluzione e regolare solo la dimensione del carattere padre più in alto (ad esempio il corpo del documento ) in base alla larghezza dello schermo e il resto degli stili dovrebbe essere al di fuori di queste query multimediali, poiché una semplice modifica della dimensione del font ridurrà automaticamente l'intera pagina perché lo font-size è stato modificato.

A proposito, dubito che lo min-width sarà sempre "miliardi di pixel". Per ora, le risoluzioni non vanno oltre il 4K negli schermi consumer e più professionali (4096x3113). Cioè, non penso che avrai bisogno di usare una query da un miliardo di pixel!

fonte

2013-03-18 08:17:00

I miliardi di pixel sono molto esagerati, devo ammettere. Tuttavia, sto cercando una soluzione a tutto tondo per indirizzare sia gli schermi a bassa definizione (ad esempio il normale telefono cellulare) che a targetizzare specificamente l'HD. Quindi, quale sarebbe una corretta query sui media? larghezza minima di 2000 pixel? O usare una misura diversa. L'impostazione di una larghezza minima in percentuale non funzionerà ovviamente. – CaptainCarl

@CaptainCarl Ah, quando intendo unità relative di cui sto parlando, questo è ciò che è necessario utilizzare nelle regole CSS per avere un design pienamente reattivo. –

@CapitalCarl E sulla media-query stessa, è necessario utilizzare intervalli: min-larghezza 700 - max-larghezza-1000 => queste regole e così via. –

Bene, 160 DPI è la linea di base per la densità dello schermo PX - dal momento che è PX schermo 1: 1 per dispositivo PX. Il display Retina è in PX da 2: 1 sul PX del dispositivo che è 320-330 DPI.

Quindi, se siete solo al fine di rendere il lavoro per Retina

min-device-pixel-ratio: 2; 
min-resolution: 192dpi;

dovrebbe andare bene. Tuttavia, Android ad esempio supporta una gamma di dispositivi con un DPI diverso; inclusi 160 DPI ("mdpi"), 240 DPI ("hdpi"), 320 DPI ("xhdpi") e tra.

Modifica: Aggiunto esempio di seguito.

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.25), 
only screen and (min--moz-device-pixel-ratio: 1.25), 
only screen and (-o-min-device-pixel-ratio: 1.25/1), 
only screen and (min-device-pixel-ratio: 1.25), 
only screen and (min-resolution: 200dpi), 
only screen and (min-resolution: 1.25dppx) {}

fonte

2013-03-18 08:17:57 Pfft

Questo è supportato solo su WebKit per ora: http://www.browsersupport.net/CSS/@media_%28-webkit-min-device-pixel-ratio%29 –

Si prega di dargli collegamenti appropriati al supporto del browser. Opera: http: //www.browsersupport.net/CSS/@ media_% 28-o-min-device-pixel-ratio% 29 - Firefox: http://www.browsersupport.net/CSS/@media_%28min--moz-device-pixel-ratio%29 la mia risposta è ampiamente supportata. – Pfft

Ho fatto una piccola ricerca e l'ho trovato. Ho sbagliato, il mondo non è perfetto! –

Presumo si utilizza la pratica standard di impostare la scala del browser tramite meta viewport (o per la mancata WindowsPhone8 IE10, @ ms-finestra) width = device-width.

In tal caso, le unità CSS "px" di riferimento nella media/ampiezza delle query multimediali corrisponderanno in modo approssimativo a un pixel fisico su uno schermo 160ppi, indipendentemente dal fatto che sia PPI alto o meno. In realtà può andare da ~ 130ppi a ~ 180ppi.

Quindi, se si sta bene con questa imprecisione nelle dimensioni dello schermo fisico che corrisponderanno alle query multimediali "px" di larghezza/altezza, andare avanti.Assicurati solo di abilitare lo sviluppatore hardware definito "css layout px" al ridimensionamento del "pixel fisico" disponibile in quasi tutti i dispositivi mobili moderni in un modo o nell'altro.

Nota: è anche possibile fare affidamento su un javascript intelligente per ottenere letture PPI più accurate dai client. Attualmente lo faccio al fine di acquisire un valore PPI unificato su entrambi i dispositivi mobili e desktop, un compito che può diventare disordinato (pensate a desktop "Zoom di pagina" vs "Zoom di Viewport" vs "Zoom di sistema") considerando che attualmente tutti i browser non IE hanno problemi simili bloccati sui loro bug tracker che indicano un forte scisma architettonico tra mobile e desktop in relazione al ridimensionamento dei pixel/zoom/rapporto/qualunque

fonte

2013-03-18 08:51:41

PPI o pixel o qualcos'altro per mediaquery su schermi HD?

risposta

Problemi correlati