Interrogazione multimediale sulla dimensione dello schermo anziché sulla risoluzione

Question

Esiste una soluzione alternativa per utilizzare la larghezza dello schermo fisica nelle query multimediali CSS? Oggi ci sono telefoni che superano la risoluzione dei monitor desktop. Tuttavia, i telefoni dovrebbero ancora visualizzare il layout mobile e desktop il layout standard.

Quindi non posso fare affidamento su query basate su pixel come nell'esempio seguente. Invece, ho bisogno di una misurazione fisica o di una densità di pixel.

@media screen and (min-width: 700px) { 

} 

Poiché non ho trovato tali misurazioni attraverso la mia ricerca, potrebbero non esistere. Ad ogni modo, come si presenta questo problema in genere?

Answer 1

Bene, per cominciare, il pixel CSS è an angular measurement ed è decentemente normalizzato tra i dispositivi. Non del tutto, ma abbastanza perché questo non sia un problema nella maggior parte dei casi.

Personalmente, misuro le query multimediali in em s in modo che siano relative alla dimensione del mio carattere. Voglio dire, le persone di solito visitano un sito web per leggere il testo trovato sul sito web, quindi finché c'è una ragionevole quantità di parole per riga sono soddisfatto.

Non si dovrebbe misurare con larghezza fisica (dispositivo) perché le persone potrebbero avere elementi dell'interfaccia utente occupare spazio (o semplicemente non eseguire i propri browser a schermo intero).

Answer 2

Non sembra esistere un metodo affidabile per verificarlo oggi.

Ho lo stesso "bisogno", che si presenta quando i pixel non sono importanti quanto la distanza di visualizzazione combinata con le dimensioni dello schermo.

Ad esempio: è possibile avere un iPad con la stessa risoluzione di un televisore enorme, ma si potrebbe desiderare di presentare il contenuto in modo molto diverso su questi due dispositivi, perché il televisore potrebbe essere situato abbastanza lontano (più dell'equivalente di un iPad a lunghezza d'arma).

Esiste una query @media per i televisori che potrebbe essere di aiuto, ma il supporto per questo al momento è probabilmente molto scarso. Il mio Google Chrome v32 lo supporta. Prova il tuo qui: http://cssmediaqueries.com/

Answer 3

Le query multimediali come @media screen and (min-width: 700px) e window.innerWidth utilizzano pixel css. All'inizio, quando i dispositivi mobili erano veramente 320 px, i pixel css e i pixel reali erano gli stessi. Ora i nuovi dispositivi con 800 px e le stesse dimensioni riportano ancora 320 pixel css.

E questo è davvero buono per la progettazione di siti Web compatibili con le versioni precedenti. Essenzialmente @media screen and (max-width: 480px) può essere tradotto a: Piccolo, tenendo conto occhi dallo schermo Distanza e dimensioni dello schermo (in metri non pixel).

Quindi il pixel css funge da misura di riferimento più di ogni altra cosa.

pixel reali, dpi, tipo di schermo e l'orientamento possono o saranno disponibili con le media query. Ma potrebbe essere un anti-modello per usare quelli.

Inoltre, non dimenticare il tag meta viewport.