Abbiamo un sito web. Lo abbiamo creato per il web quando nel web ci navigavano i PC con risoluzione video minima 1024×768 e lo abbiamo dotato di css, separando quindi il cosa visualizzare (html) dal come (css). Ora però il web viene navigato anche (e sempre di più) dagli smartphone la cui risoluzione video è quasi sempre 320x480px, oppure 480x800px. Con tali impreviste risoluzioni i contenuti del nostro sito appaiono troppo piccoli, costringendo i visitatori a usare spesso lo zoom e a spostarsi in continuazione tra una zona e un’altra del sito. Vogliamo mettere fine a queste difficoltà! Vogliamo rendere più agevole la navigazione del nostro sito agli smartphone, ma non abbiamo mai preso sul serio questa ipotesi perché, fino a qualche tempo fa, era praticamente necessario rifare buona parte del sito. Ora non più!
Da qualche tempo si sono infatti diffuse le così dette Media Queries. Esse, unite ai browser di nuova generazione, ci consentono di cambiare l’aspetto del nostro sito in automatico, senza javascript aggiuntivi… Il sito che stiamo leggendo le usa già adesso!
Ok, vediamo di capirci qualcosa…
Obiettivo: cambiare l’aspetto del nostro sito in base alla risoluzione video del dispositivo che lo naviga.
Per ottenere tale obiettivo possiamo procedere in diversi modi:
- creare css diversi per dispositivi diversi
- creare un solo css con, al suo interno, codice alternativo
In entrambi i casi la prima cosa da fare è aggiungere, nel tag <head> delle nostre pagine, il seguente codice
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
Poiché scrivere tutto in un unico file css riduce il numero di http request necessarie per esaudire la richiesta del browser, noi useremo tale metodo. Apriamo quindi il nostro file.css e aggiungiamoci in coda il nostro codice condizionale con le Media Queries.
Facciamo un esempio chiarificatore (si spera).
@media only screen and (min-width:150px) and (max-width:700px) {
body {
color:#000;
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size:12px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
width:100%;
}
#page {
width: 98%;
min-width: 310px;
margin: 0px auto;
padding: 0px 0px;
position: relative;
}
}
@media only screen and (orientation:portrait) and (min-width:321px) {
html, body {
width: 320px;
min-width: 310px;
margin: 0px;
overflow-x: hidden;
}
#page {
width: 320px;
min-width: 310px;
margin: 0px;
}
}
@media only screen and (orientation:portrait) and (min-width:481px) {
html, body {
width: 480px;
min-width: 470px;
margin: 0px;
overflow-x: hidden;
}
#page {
width: 480px;
min-width: 470px;
margin: 0px;
}
}
Il codice è volutamente semplice, al fine di mettere in evidenza lo stretto indispensabile.
Prendiamo in esame la prima riga del codice proposto:
@media only screen and (min-width:150px) and (max-width:700px)
e analizziamolo nei dettagli.
@media: indica al browser che da questo momento e fino alla prima parentesi graffa aperta verranno indicate le caratteristiche dei dispositivi ai quali dovranno essere applicate le regole presenti dopo la parentesi.
only screen: prima caratteristica dei dispositivi; ‘only’ serve solo a tenere buoni i vecchi user agent; la parola ‘screen’ invece indica tutti i dispositivi con schermo a colori (l’elenco completo dei dispositivi lo si può trovare nelle specifiche w3c css).
(min-width:150px): indica tutti i dispositivi con una risoluzione minima (larghezza) pari a 150px.
(max-width:700px): indica tutti i dispositivi con risoluzione massima (larghezza) pari a 700px.
Quindi il codice preso in esame indica tutti i dispositivi che abbiano contemporaneamente (and) le seguenti caratteristiche:
- schermo a colori
- risoluzione minima 150px
- risoluzione massima 700px
Adesso il browser, istruito in tal modo, leggerà il codice css che dovrà applicare ai device che rientrano nelle caratteristiche indicate e lo applicherà diligentemente. Poniamo attenzione al fatto che in tali caratteristiche rientra anche lo schermo di un monitor PC con risoluzione bassa, oppure la finestra di un browser che viene ridimensionata sotto i 700px!!! Non ci crediamo? Se usiamo un browser diverso da internet explorer, proviamo a ridimensionare la larghezza della finestra mentre leggiamo questo articolo. Appena la larghezza della finestra scenderà sotto i 700px, avremo la conferma in diretta di quanto stiamo qui dicendo 😉
Lo so che ci avete provato! Miscredenti! Fate bene… 😉
Ma il codice non è finito…
@media only screen and (orientation:portrait) and (min-width:321px)
A cosa servono gli altri due @media che troviamo subito dopo? La risposta è tutta in questo codice:
(orientation:portrait).
Esso indica come bisogna comportarsi in caso di posizione verticale del dispositivo. A tale indicazione si aggiunge quella della risoluzione minima. Ossia, stiamo dicendo al browser che se il dispositivo è in posizione verticale e la sua risoluzione è di 320px deve ridurre le dimensioni della scchermata in modo da farla rientrare tutta nello schermo del dispositivo. Questa operazione è necessaria perché altrimenti passando dalla posizione orizzontale a quella verticale, le dimensioni delle pagine del sito non si rimpiciolirebbero.
Bene. Questo è quanto.
Per maggiori è più autorevoli dettagli facciamo sempre riferimento al W3C.
Ciao Alessandro,
anche io ho un problema simile…
Sono alle prime armi con il responsive e ho un problema di zoom dopo l’evento orientationchange, su iOs. Se carico la pagina da portrait lo zoom è al 100% (quindi ok), se poi passo a landscape e successivamente torno su portrait lo zoom è inferiore.
Posso imporgli uno zoom al 100%?
Spero che tu possa aiutarmi anche se è passato del tempo dall’ultimo commento a questo post
Grazie
Ciao Serena,
questo articolo è un po’ datato… alcune cose sono cambiate…
Prova a scaricare e inserire nelle tue pagine lo script di normalizzazione (http://necolas.github.io/normalize.css/).
In bocca al lupo 🙂
Scusami, ma non ho la possibilità di leggermi la guida.
Mi puoi spiegare meglio il significato di “Apriamo quindi il nostro file.css e aggiungiamoci in coda il nostro codice condizionale con le Media Qeuries.”
devo fare un if…????
io l’ho semplicemente messo alla fine del mio file css, ma non funziona…
grazie
Ciao Federico,
purtroppo senza studio su certe cose non si ottengono risultati apprezzabili…
Quindi oltre a scrivere quello che ho scritto e un libro intero gratuito sull’argomento, posso fare poco altro.
Ciao Alessandro, scusami per il disturbo, il Tuo post è molto interessante e io molto ignorante in materia: potresti dirmi per favore dove esattamente posizionare il codice ? ho provato ad inserirlo tra i tag “head” e ho inserito nel css il codice con le media qeuries (in fondo pagina-css) ma sonocerto che sbaglio in qualcosa. ti sono grato se vorrai informarmi in merito, grazie.chris
Ciao Christian,
penso sia utile per te scaricare il mio libro. Lì ci impari un sacco di cose e c’è un paragrafo apposito sulle media queries. Inoltre… è gratuito! Cosa vuoi di più? 🙂
Lo trovi qui: Programmare per il web, lato client.
Buono studio.
Molto interessante ma oggi giorno iPhone 4/4s e iPad di terza generazione, hanno il retina display. Con i media query è possibile sostituire le immagino con le corrispondenti ad alta risoluzione, come è possibile integrare questa cosa con quella che hai descritto?
Ciao Luca,
il display retina di Apple è una faccenda hardware. Cioè quel tipo di schermo (hardware) è in grado di mostrare le immagini (e anche il testo in verità) ad una risoluzione migliore rispetto agli altri schermi. Le media queries non sono interessate da tali caratteristiche. Lo scopo delle media queries è quello di adattare alla dimensione dello schermo non la qualità delle immagini (o del testo), ma la dimensione di tutta la pagina web, eliminando di fatto la necessità di eseguire continui pinch to zoom per leggere questa o quella parte del sito. Non c’è quindi nulla da “integrare” 🙂
Come non detto, basta mettere
@media only screen and (-webkit-min-device-pixel-ratio: 2)
e quindi le immagini in formato retina, indipendentemente dalla risoluzione dello schermo se i ppi sono doppi carica le immagini ad alta risoluzione.
Sviluppando il sito mi sono accorto che girando l’iPhone in orizzontale, il testo viene ingrandito enormemente. Lo fa anche il tuo sito. Per risolvere la situazione basta inserire la seguente stringa nelle impostazioni del body nel css:
-webkit-text-size-adjust: 100%;
Questo evita ingrandimenti involontari, funziona bene 😉
ciao,
ottima guida, mi sto scontrando con i siti per mobile e ho un piccolo ostacolo per la dimesione della pagina.
cioè come posso ovviare al fatto che le preferenze dei dispositivi hanno uno zoom per la visualizzazione della pagina web che mi sballa tutto?
Ciao Alessandro,
non ho ben capito quale è il tuo problema…
si scusa, mi sono espresso male.
dicevo che con un samsung next per esempio, il browser imposta come default una visualizzazione zoom che riduce la pagina (disattivabile nelle preferenze, in questo caso uso dolphin) cosa che iphone non fa (ho provato oggi).
Ne consegue che diventa ingestibile la scelta della dimensione degli elementi. se visualizzo lo stesso sito su iphone o android non saranno mai uguali, su andoid sarà sempre piu piccolo, a meno che l’utente non disattivi l’opzione zoom.
hai mai riscontrato questo problema?
Ciao Ale,
l’unica cosa che mi viene in mente è quella di sostiutuire l’unità di misura dei caratteri, da px a em. Online trovi tutto quello che ti serve…
Volevo solo ringraziarti.
Dopo un paio di notti insonni ed una decina di crash del server, ho avuto la fortuna di cliccare sul tuo sito ed utilizzare le media queries.
Ciao.
Molto bene c0cc0bill,
sei stato davvero fortunato ad arrivare su questo sito! E’ praticamente sconosciuto sul web. Gioca al superEnalotto! 😀
Comunque son contento di averti aiutato… 🙂