Come codificare le query multimediali CSS che hanno come target TUTTI i dispositivi mobili e i tablet?

@media only screen and (max-device-width : 640px) { /* Styles */ } @media only screen and (max-device-width: 768px) { /* Styles */ } 

Questo è quello che ho finora. Il mockup PSD per il sito mobile su cui sto lavorando è largo 640 px. L’altra, la versione tablet del sito, è 768px. Sono stato in grado di testare il sito nel mio browser usando solo la larghezza massima, ma ora è il momento di far funzionare questo sito sui dispositivi, ed è ancora il rendering della normale pagina web a grandezza naturale. Le due domande sopra sono la mia ipotesi migliore. Dove sto andando male?

Questo può essere fatto con Query di Livello 4: ( Browser Support è abbastanza buono – CaniUse )

Interaction Media Features

L’idea qui è di indirizzare i dispositivi in ​​base alle loro capacità . (come detto, verificando la dimensione o la risoluzione del dispositivo che tende a spostarsi)

La funzione media puntatore interroga la qualità del meccanismo puntatore utilizzato dal dispositivo.

La funzione media al passaggio del mouse interroga la capacità dell’utente di passare con il mouse su elementi della pagina con un determinato dispositivo.

Quindi, per rispondere alla domanda …

I dispositivi mobili / tabelle sono simili in quanto:

1) La precisione del meccanismo di input primario del dispositivo è limitata.

Ciò significa che potremmo utilizzare la seguente query multimediale:

 @media (pointer:coarse) { /* custom css for "touch targets" */ } 
 div { width: 400px; height: 200px; color: white; padding: 15px; font-size: 20px; font-family: Verdana; line-height: 1.3; background: green; } @media (pointer:coarse) { div { background: red; } } 
 

The pointer media feature queries the quality of the pointer mechanism used by the device.

The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism)

Anziché utilizzare inizialmente larghezze specifiche o fare scherzi con gli orientamenti o qualsiasi altra assurdità, ti suggerisco di utilizzare il seguente tag multimediale …

 @media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) { /* Your touch-specific css goes here */ } @media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) { /* Your click-specific css goes here */ } 

E per cosa usi questi tag? Per impostare elementi per hover e clic su eventi touch.

I dispositivi touch, diversi da alcuni dispositivi nelle aree grigie sopraindicate, hanno una risoluzione molto diversa rispetto ai dispositivi desktop. Do -non- questo per impostare elementi di design, ma elementi di navigazione. Alcuni pudenti potrebbero lamentarsi che una follia con larghezza massima potrebbe essere migliore, ma ci sono così tanti telefoni HD che è ridicolo che il dispositivo-larghezza massima diventi rapidamente inutile.

Tuttavia, dovresti utilizzare le query sulla larghezza del supporto di larghezza. Tuttavia, non preoccuparti della larghezza massima del dispositivo, solo larghezza massima e larghezza minima. Lascia che i tag sopraindicati indirizzino il tuo touch rispetto a non toccare gli utenti, lascia che sia l’indirizzo di larghezza minima rispetto a quello di larghezza massima in base alle dimensioni della finestra e regola le immagini del sito.

Inoltre, l’uso dell’orientamento per determinare se è mobile o meno è semplicemente sciocco, in quanto anche i monitor possono essere posizionati in vari orientamenti (una configurazione comune che ho visto per i monitor a 3 è un monitor del centro verticale e dei monitor laterali).

Per le viste in larghezza, concentrati sul rendere il tuo sito pulito su varie larghezze, ignorando il tipo di dispositivo che sta effettivamente accedendo ad esso, ma assicurati che lo schermo sia visualizzato in modo pulito in varie dimensioni. Questo è un buon design che si applica sia al desktop sia al cellulare. Se hanno il tuo sito in una piccola finestra nell’angolo in alto a sinistra del loro schermo come riferimento (o distrazione veloce) mentre usano la maggior parte del loro spazio sullo schermo altrove, e dovrebbe essere per loro, così come per gli utenti mobili, che il tuo le larghezze più piccole sono costruite per. Provare qualsiasi altra cosa sta rapidamente facendo un percorso molto doloroso e controproducente per lo sviluppo del web. Quindi, per quelle larghezze più piccole, puoi impostare le tue larghezze per quello che vuoi, ma ne includerò alcune che personalmente mi piacciono.

Quindi, nel complesso, dovresti avere qualcosa di simile …

 @media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) { #touch_logo { display: inherit; } #mouse_logo { display: none; } /* Your touch-specific css goes here */ } @media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) { #touch_logo { display: none; } #mouse_logo { display: inherit; } /* Your click-specific css goes here */ } @media (min-width: 541px){ /* Big view stuff goes here. */ } @media (max-width: 540px) and (min-width: 400px){ /* Smaller view stuff goes here. */ } @media (max-width: 399px){ /* Stuff for really small views goes here. */ } 

Anche se, non dimenticare di includere quanto segue nella testa della tua pagina:

  

Potrebbe comunque interrompersi in alcuni casi, ma ciò dovrebbe essere più conciso e più completo rispetto a molte altre soluzioni.

Hai i tuoi stili desktop principali nel corpo del file CSS (1024px e versioni successive) e poi per dimensioni dello schermo specifiche:

 @media all and (min-width:960px) and (max-width: 1024px) { /* put your css styles in here */ } @media all and (min-width:801px) and (max-width: 959px) { /* put your css styles in here */ } @media all and (min-width:769px) and (max-width: 800px) { /* put your css styles in here */ } @media all and (min-width:569px) and (max-width: 768px) { /* put your css styles in here */ } @media all and (min-width:481px) and (max-width: 568px) { /* put your css styles in here */ } @media all and (min-width:321px) and (max-width: 480px) { /* put your css styles in here */ } @media all and (min-width:0px) and (max-width: 320px) { /* put your css styles in here */ } 

Questo coprirà praticamente tutti i dispositivi utilizzati – mi concentrerei per ottenere lo stile corretto per le taglie alla fine dell’intervallo (ad esempio 320, 480, 568, 768, 800, 1024) come per tutti gli altri che saranno appena sensibile alle dimensioni disponibili.

Inoltre, non utilizzare px ovunque – usa em o%