Media query per iPad e iPhone

Parliamo delle media query per i dispositivi mobili Apple.
Si tratta di codice css che va inserito all'interno del nostro foglio di stile.
Partiamo dalla prima media query, che è per gli ipad e in generale per schermi desktop con risoluzione medio-bassa

 @media only screen   
 and (min-device-width : 768px)   
 and (max-device-width : 1024px)   
 {  
  // i tuoi stili vanno qui!
 }  

Proseguiamo con le media query per iPhone4

 @media  
 only screen and (-webkit-min-device-pixel-ratio : 1.5),  
 only screen and (min-device-pixel-ratio : 1.5) {  
   // i tuoi stili vanno qui!  
 }  

E infine quelle per iPhone5

 @media   
 only screen and (device-aspect-ratio: 40/71) {  
   // i tuoi stili vanno qui!!  
 }  

NB l'espressione "only screen" serve a fare in modo che la media query venga applicata non solo sui dispositivi specifici ma anche qualora un browser venga ridimensionato alla risoluzione specificata.

In pratica, se su un computer desktop apro una finestra di Chrome o Firefox e la ridimensiono fino ad avere una risoluzione simile a quella di un iphone, verrà applicato lo stile css dell'iphone (espediente utile per testare la visualizzazione anche da PC).

Per ulteriori dispositivi e impostazioni : http://stephen.io/mediaqueries/

Precludere viewport zoom su safari mobile

Può succedere che l'utente faccia doppio tap su un pulsante o link del sito, con il risultato che su safari mobile (iphone, ipad) avvenga uno zoom della pagina con un indesiderato e antiestetico effetto.

Per evitare questo comportamento su safari mobile inserire nell'head:

<meta name="viewport" content="width=device-width, user-scalable=no">