Il problema principale è che se l'utente fa clic al di fuori della casella dello zoom, lo zoom verrà bloccato e non sarà in grado di ingrandire o ridurre.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Il viewport è l'area visibile all'utente di una pagina web. Varia a seconda del dispositivo e sarà più piccolo su un telefono cellulare che sullo schermo di un computer.
La parte width=device-width imposta la larghezza del viewport in modo che segua la larghezza del dispositivo (che varierà a seconda del dispositivo).
La parte initial-scale=1.0 imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.
La parte maximum-scale=1.0 imposta di quanto l'utente può ingrandire la pagina. Un valore di 1.0 significa che non è consentito lo zoom.
La parte user-scalable=no disabilita qualsiasi zoom che potrebbe essere disponibile per impostazione predefinita su alcuni dispositivi (come il doppio tocco per ingrandire).
Come disabilitare lo zoom su una pagina Web mobile
Per disabilitare lo zoom su una pagina Web per dispositivi mobili in HTML, utilizza il seguente codice:
In questo modo la pagina si adatterà alla larghezza del dispositivo su cui viene visualizzata.
Zoom disattivato
Per ridurre lo zoom in HTML, usa la proprietà zoom. Per esempio:
ingrandimento: 1;
Disattiva il ridimensionamento HTML
Il ridimensionamento HTML è una funzionalità dell'HTML che consente ai browser Web di ingrandire o ridurre le dimensioni del testo e delle immagini per renderle più leggibili su schermi più piccoli o più grandi. Questa funzione può essere disattivata nella maggior parte dei browser impostando la proprietà html-scaling su "none".
