Html5 disabilitare il pinch zoom sul mobile

Cos’è il pinch zoom? Tradotto letteralmente significa “pizzica per ingrandire” , ed è uno dei gesti più utilizzato sui dispositivi mobile.

In pratica il pinch zoom è un movimento delle dita in contemporanea che ci permette di ingrandire o di rimpicciolire un immagine, un video o una pagina web, sul nostro dispositivo mobile.
Oggi vediamo insieme come disattivare questa funzionalità nelle nostre applicazioni web.

Viewport è il meta tag di HTML5, il quale andremo a modificare per raggiungere il nostro scopo, ovvero inibire agli utenti di zoomare le pagine web del nostro sito.
La struttura base del meta tag è la seguente:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width:
Istruzione che impone al browser di impostare la larghezza (width) della viewport in base alla larghezza dello schermo del dispositivo.

initial-scale=1.0:
La proprietà initial-scale imposta il fattore di zoom iniziale, relativo al momento in cui la pagina viene caricata.
Aggiungendo la proprietà user-scalable=0 alla fine dell’istruzione viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" /> 

in questo modo abbiamo dato l’istruzione ai browser dei dispositivi mobile di impedire l’uso di pinch zoom da parete dell’utente.

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>