Come rendere una pagina html mobile friendly?
Per ottenere una pagina mobile friendly è necessario l’uso di uno specifico meta tag e la sua corretta impostazione.
Esempio
Un codice d’esempio, che deve essere inserito per tutti gli elementi della pagina (quindi per intenderci appena dopo il tag <html>) è il seguente:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Come rendere un’immagine mobile friendly usando css e html?
Per rendere un’immagine mobile-friendly usando il css è necessario aggiungere la proprietà “style=”width:100%;”.
Vediamo subito un esempio in questo articolo riguardo a come implementare la proprietà “style=”width:100%;” all’interno del codice css e html in un’immagine per renderla mobile friendly e permettere l’adattamento dell’immagine alle dimensioni dello schermo.
Si può cambiare il valore del width a piacere a modificando la percentuale riportata nel numero.
Esempio
Ecco il codice dell’immagine:
<img src=”immagine-souvlaki-esempio.jpg” style=”width:100%;”>
All’interno di src potete mettere l’url oppure il nome dell’immagine se nella stessa cartella del file html considerato.
Se hai interesse per questo comando, probabilmente ne avrai anche per il comando @media del css, che permette di attuare effetti differenti a seconda della grandezza dello schermo che carica la pagina web.