Classe III D e III E SIA: Codice html da inserire per ridimensionare la pagina con il meta tag "viewport"
Codice html da inserire per ridimensionare la pagina
I siti Web sono realizzati con il linguaggio Html, Php, Aspx.
Di solito la pagina viene visualizzata in modo corretto su un pc o su un portatile.
Le cose cambiano se la pagina viene visualizzata su un tablet, un smartphone, un Iphone.
Se vogliamo adattare la pagina ai browser dei dispositivi mobili, dobbiamo sempre inserire nella head della nostra pagina il meta tag viewport. In questo caso, comunichiamo al browser il modo in cui dovrà gestire la viewport. Il controllo viene fatto in modo forzato dal creatore delle pagine Web.
L’istruzione minima da inserire è questa:
<meta name="viewport" content="width=device-width">
Con questo MetaTag obblighiamo il browser ad impostare la larghezza (width) della viewport in base alla larghezza dello schermo del dispositivo (device-width).
Con questa istruzione, su un iPhone con orientamento portrait la larghezza della viewport sarà pari a 320px; 480px se lo smartphone è in orientamento landscape; sarà di 1024px su un iPad in modalità landscape, e così via.
E’ il realizzatore delle pagine html che decide di dare le dimensioni al layout
Ma cosa succede ad un sito con un layout non adattato per il mobile ( Iphone ) se si inserisce quella riga di codice? La pagina ovviamente viene tagliata.
Sappiamo che l’area di visualizzazione è di 320px e non 980px come di default su Safari per iOS, il layout non viene adattato, non avviene nessun ridimensionamento in scala, visualizzeremo solo una parte della pagina larga 320px, e per accedere al resto dovremo affidarci allo scrolling orizzontale.
Pertanto, se abbiamo un sito che non si adatta nel layout ai dispositivi mobili, non usiamo il meta tag viewport e lasciamo che sia il browser a compiere l’adattamento nei modi che abbiamo visto; se operiamo in un contesto responsive in cui il sito si adatta automaticamente nel layout ai dispositivi mobili, dobbiamo usare il meta tag nella configurazione vista qui sopra.
Personalizzazione delle impostazioni del meta tag viewport
Attraverso il meta tag viewport possiamo intervenire su altre impostazioni. Nel nostro progetto guida abbiamo così configurato l’istruzione:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
Con la proprietà user-scalable possiamo decidere se consentire o meno all’utente di ridimensionare/zoomare la pagina. La home page de “Il viaggio” non può essere ridimensionata.
La proprietà initial-scale imposta il fattore di zoom iniziale, relativo al momento in cui la pagina viene caricata.
Con minimum-scale e maximum-scale possiamo invece stabilire di quanto l’utente può zoomare la pagina, fissando dei limiti (avendo usato user-scalable=no queste ultime istruzioni sono in realtà un di più, le abbiamo inserite nel codice solo a fini didattici).
I siti Web sono realizzati con il linguaggio Html, Php, Aspx.
Di solito la pagina viene visualizzata in modo corretto su un pc o su un portatile.
Le cose cambiano se la pagina viene visualizzata su un tablet, un smartphone, un Iphone.
Se vogliamo adattare la pagina ai browser dei dispositivi mobili, dobbiamo sempre inserire nella head della nostra pagina il meta tag viewport. In questo caso, comunichiamo al browser il modo in cui dovrà gestire la viewport. Il controllo viene fatto in modo forzato dal creatore delle pagine Web.
L’istruzione minima da inserire è questa:
<meta name="viewport" content="width=device-width">
Con questo MetaTag obblighiamo il browser ad impostare la larghezza (width) della viewport in base alla larghezza dello schermo del dispositivo (device-width).
Con questa istruzione, su un iPhone con orientamento portrait la larghezza della viewport sarà pari a 320px; 480px se lo smartphone è in orientamento landscape; sarà di 1024px su un iPad in modalità landscape, e così via.
E’ il realizzatore delle pagine html che decide di dare le dimensioni al layout
Ma cosa succede ad un sito con un layout non adattato per il mobile ( Iphone ) se si inserisce quella riga di codice? La pagina ovviamente viene tagliata.
Sappiamo che l’area di visualizzazione è di 320px e non 980px come di default su Safari per iOS, il layout non viene adattato, non avviene nessun ridimensionamento in scala, visualizzeremo solo una parte della pagina larga 320px, e per accedere al resto dovremo affidarci allo scrolling orizzontale.
Pertanto, se abbiamo un sito che non si adatta nel layout ai dispositivi mobili, non usiamo il meta tag viewport e lasciamo che sia il browser a compiere l’adattamento nei modi che abbiamo visto; se operiamo in un contesto responsive in cui il sito si adatta automaticamente nel layout ai dispositivi mobili, dobbiamo usare il meta tag nella configurazione vista qui sopra.
Personalizzazione delle impostazioni del meta tag viewport
Attraverso il meta tag viewport possiamo intervenire su altre impostazioni. Nel nostro progetto guida abbiamo così configurato l’istruzione:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
Con la proprietà user-scalable possiamo decidere se consentire o meno all’utente di ridimensionare/zoomare la pagina. La home page de “Il viaggio” non può essere ridimensionata.
La proprietà initial-scale imposta il fattore di zoom iniziale, relativo al momento in cui la pagina viene caricata.
Con minimum-scale e maximum-scale possiamo invece stabilire di quanto l’utente può zoomare la pagina, fissando dei limiti (avendo usato user-scalable=no queste ultime istruzioni sono in realtà un di più, le abbiamo inserite nel codice solo a fini didattici).
Commenti
Posta un commento