Media Query per smartphone e tablet su Blogger (iPhone, iPad, Galaxy, HTC, Nexus).

Cosa rappresenta la media query e come impostarla nei dispositivi mobili standard più venduti quali iphone, ipad, galaxy, htc, nexus e apple watch.

Una delle sfide maggiori per gli webmaster  è quella di adattare il layout del sito al dispositivo con cui viene aperto. Gli utenti di Blogger che abbiano un modello ufficiale di Blogger sotto questo aspetto possono stare tranquilli mentre quelli che hanno un template scaricato da internet magari da molto tempo è bene che controllino la presenza di alcuni tag fondamentali.

TAG VIEWPORT

Tramite il tag viewport si definisce la larghezza dell'area di visualizzazione in questo modo il browser del device la rileva e la adatta automaticamente alla larghezza del dispositivo. Affinché questa operazione vada a buon fine bisogna che tale tag sia correttamente impostato.

Andate quindi su Modello > Modifica HTML e cercate una riga simile a questa

<b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>      <meta content='width=1100' name='viewport'/>
    </b:if>

Come vedete è presente il tag condizionale evidenziato di giallo che inserisci due valori per il tag viewport in funzione del tipo di dispositivo mobile o desktop con cui viene visualizzato il blog. Per il desktop la larghezza del layout è 1100 pixel mentre per il mobile è in funzione della larghezza del device tramite il tag device-with che appunto il tag che definisce questo valore. Se nel vostro modello non fosse presente un codice con la struttura del precedente è il caso di cambiarlo.

ORIENTAMENTI DEI CELLULARI

I cellulari di gamma medio alta hanno due diversi tipi di visualizzazioni: portrait e landscape. Detto in altri termini si può visualizzare il cellulare in verticale (portrait) o in orizzontale (landscape). Queste due diverse opzioni comportano una diversa larghezza del device.

Nel codice precedente la proprietà  initial-scale=1.0 imposta il fattore di zoom iniziale mente con minimum-scale=1.0, maximum-scale=1.0 possiamo indicare di quanto l'utente possa zoomare la pagina. In sostanza con quei tag impediamo all'utente di ridimensionare o zoomare la pagina. Questa credo sia una impostazione di default di Blogger perché l'ho trovata in tutti i modelli che ho analizzato. Una impostazione simile si può avere anche tramite il tag user-scalable=no che impedisce appunto la variazione della dimensione della pagina che nei cellulari si effettua con le dita.

TAG MEDIA QUERY

Con il CSS3 sono stati introdotti degli strumenti molto potenti per creare dei fogli di stile specifici in funzione del dispositivo con cui viene aperta una data pagina. Possiamo creare dei CSS esterni, salvarli in un file e caricarli nel modello con un codice come il seguente  sopra alla riga </head>

<link rel="stylesheet" media="screen" href="Indirizzo del file.css" />

Dovrà essere inserito l'URL del CSS e questo sarà attivo a seconda di quello che abbiamo impostato nell'attributo evidenziato di verde. Nello specifico media="screen". Le altre opzioni sono:

1. all: il CSS si applica a tutti i dispositivi
2. screen: schermo del computer
3. print: pagina stampata
4. projection: presentazioni e proiezioni
5. speech: dispositivi a sintesi vocale
6. braille: supporti basati sull’uso del braille
7. embossed: stampanti braille
8. handheld: dispositivi mobili con schermo piccolo
9. tty: terminali
10. tv: schermo TV

OPERATORI LOGICI

Oltre agli attributi appena elencati si possono creare delle combinazioni con gli operatori logici and, not e only. Mi limito solo a fare alcuni esempi pratici:

media="screen and (color) and (device-aspect-ratio: 4/3)"  con i CSS attivi solo su schermi di computer a colori e con un rapporto tra larghezza e altezza di 4/3.

media="only screen and (color) and (device-aspect-ratio: 16/9)" con i CSS attivi solo siu schermi di computer a colori con un rapporto tra larghezza e lunghezza di 16/9.

Possiamo inserire i CSS per i vari dispositivi anche con questi altri tag
@import url(URL_FILE.css) screen and (color);
oppure con quest'altro codice
@media screen { /* Qui vanno inserite le classi di stile */ }
che è quello più usato con i CSS inseriti direttamente nel modello.

ATTRIBUTI DELLE MEDIA QUERIES

Vediamo quali sono le condizioni da utilizzare per creare dei fogli di stile per ogni dispositivo.

TAG WIDTH

Con questo tag si imposta la larghezza dell'area di visualizzazione del documento. Facciamo un esempio pratico per rendere l'idea

@media screen and (min-width: 320px) and (max-width: 768px) {
/* Qui vanno le regole CSS */
}

L'espressione precedente applica le regole di stile che sono comprese tra le parentesi graffe quando le dimensioni del dispositivo sono comprese tra 320 pixel e 768 pixel. Ed ecco un secondo esempio:

#contenitore {
background: yellow;
width: 300px;
height:200px;
padding: 30px;
border-top-left-radius: 10px;
color: black;
}
@media screen and (min-width: 320px) and (max-width: 760px) {
#contenitore {
color: blue;
}
}

Viene definito un rettangolo con lo sfondo giallo e il testo di colore nero. Quando però le dimensioni dello schermo saranno comprese tra 320 e 760 pixel tale colore diventerà blu.

TAG DEVICE-WIDTH E DEVICE-HEIGHT E ORIENTATION

Vengono caricati i CSS in funzione non solo della larghezza dei dispositivi ma anche della loro orientazione portrait o landascape. Ecco un altro esempio pratico:

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="URL-File-regole-iPad-portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="URL-File-regole-iPad-landscape.css" type="text/css" />

con dei file CSS esterni che verranno caricati in funzione della orientazione del dispositivo.

MEDIA QUERIES PER DISPOSITIVI STANDARD

Quando una pagina non viene visualizzata correttamente da un certo dispositivo mobile si può tentare di modificare alcune impostazioni dei CSS per quel particolare dispositivo. Queste modifiche vanno fatte con attenzione e prima di procedere bisogna trovare quali sono i selettori univoci dell'elemento che vogliamo modificare con un tool come Analizza elemento di Firefox.

Visto che in generale i CSS del mobile sono diversi da quelli del desktop dovremo usare un altro strumento come Screenfly per aprire da computer il sito in oggetto con la visualizzazione mobile. Dopo aver trovato i selettori bisogna impostare i codici specifici che successivamente andranno incollati su Modello > Modifica HTML subito sopra alla riga ]]></b:skin>.

MEDIA QUERY IPHONE

/* Portrait e Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}
/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
}
/* ----------- iPhone 5 e 5S ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}
/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}
/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
}
/* Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
}

I CSS specifici vanno incollati tra le due parentesi graffe alla fine del blocco che ci interessa.

MEDIA QUERY PER CELLULARI GALAXY

/* ----------- Galaxy S3 ----------- */
/* Portrait e Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: portrait) {
}
/* Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: landscape) {
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
}
/* Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
}
/* Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {
}

 

MEDIA QUERY PER CELLULARI HTC

/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
}
/* Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {
}

 

MEDIA QUERY PER TABLET IPAD

/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
}

 

MEDIA QUERY PER TABLET GALAXY

/* ----------- Galaxy Tab 10.1 ----------- */
/* Portrait and Landscape */
@media
  (min-device-width: 800px)
  and (max-device-width: 1280px) {
}
/* Portrait */
@media
  (max-device-width: 800px)
  and (orientation: portrait) {
}
/* Landscape */
@media
  (max-device-width: 1280px)
  and (orientation: landscape) {
}

 

MEDIA QUERY PER TABLET NEXUS

/* ----------- Asus Nexus 7 ----------- */
/* Portrait and Landscape */
@media screen
  and (device-width: 601px)
  and (device-height: 906px)
  and (-webkit-min-device-pixel-ratio: 1.331)
  and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
  and (device-width: 601px)
  and (device-height: 906px)
  and (-webkit-min-device-pixel-ratio: 1.331)
  and (-webkit-max-device-pixel-ratio: 1.332)
  and (orientation: portrait) {
}
/* Landscape */
@media screen
  and (device-width: 601px)
  and (device-height: 906px)
  and (-webkit-min-device-pixel-ratio: 1.331)
  and (-webkit-max-device-pixel-ratio: 1.332)
  and (orientation: landscape) {
}

 

MEDIA QUERY PER PORTATILI (LAPTOP)

/* ----------- Schermi non-Retina ----------- */
@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Schermi Retina ----------- */
@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
}

 

MEDIA QUERY PER APPLE WATCH

/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) {
}

 

MEDIA QUERY PER MOTO 360 WATCH

/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) {
}

 

BREAPOINT NELLE MEDIA QUERIES

Un breakpoint è un punto in cui si verifica un passaggio da un CSS a un altro. Se impostiamo una media query con max-width: 480px quando si passerà a una visualizzazione superiore a 480 pixel i CSS compresi in quella media query non varranno più e saranno sostituiti da altri. Ultimo esempio:

body {
background: yellow;
}
@media screen and (min-width: 480px) {
body {
  background: red;
}
}
@media screen and (min-width: 768px) {
body {
  background: blue;
}
}
@media screen and (min-width: 1024px) {
body {
  background: green;
}
}
@media screen and (min-width: 1280px) {
body {
  background: gray;
}
}

Con il codice lo sfondo della pagina sarà giallo in linea generale. Quando però sarà raggiunta una dimensione di 480 pixel lo sfondo diventerà rosso. Quando invece si raggiungerà una larghezza di 768 pixel lo sfondo diventerà blu. Se si aumenta ancora e si raggiungono i 1024 pixel lo sfondo si visualizzerà come verde. Infine per una larghezza superiore a 1280 pixel lo sfondo sarà grigio.