Viewport per siti mobile!
Sempre più persone usano i vari smartphone, tab, iPhone, per navigare in rete, e sempre più difficile il compito dei web designer per far sì che i siti web da loro creati siano perfettamente compatibili con tutti i dispositivi.
Per raggiungere questo obiettivo un ulteriore supporto ci viene incontro: il metatag viewport. Attraverso il metatag viewport e altri piccoli accorgimenti, infatti, possiamo creare le basi per un sito compatibile con tutti i dispositivi. Inserendo il metatag viewport nell’head della nostra pagina html faremo in modo che il nostro sito si adatterà a seconda della risoluzione del monitor del dispositivo dal quale si sta aprendo la pagina web.
Vediamo come fare:
1) Impostiamo la struttura della nostra pagina (notiamo come stiamo scrivendo attraverso l’HTML5)
< !doctype html>
<html>
<head>
<title>Community PC Academy</title>
</head>
<body>
<p>Il metatagviewport</p>
</body>
</html>
2) Se lasciassimo come sopra un dispositivo mobile non potrebbe aprire in modo corretto e leggibile la nostra pagina ma inserendo il codice viewport potremo visualizzarlo come fossimo al pc.
Il metatag viewport è il seguente:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Dove con “width=device-width”, diciamo al broswer che il sito deve aprirsi a seconda della risoluzione del monitor che lo apre.
Il metatag va inserito nell’head:
< !doctype html>
<html>
<head>
<title>Community PC Academy</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p>ViewPort</p>
</body>
</html>
Promozioni
Potrebbe interessarti
Commenti