Viewport per siti mobile!

Francesco PC Academy di - 8 settembre 2011 in Web Design

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>

 

Share

Promozioni

Potrebbe interessarti



Francesco PC Academy
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.

Commenti