L’evoluzione del web e l’uso sempre più diffuso di dispositivi mobili hanno portato a un cambiamento significativo nel modo in cui gli sviluppatori affrontano la creazione di pagine web in HTML. Ora è essenziale considerare le diverse modalità di interazione degli utenti sui dispositivi desktop e mobili.
Gli utenti desktop e mobili hanno esigenze e comportamenti differenti quando navigano su un sito web, il che implica che i developer devono adottare approcci distinti per garantire un’esperienza pratica e user-friendly.
Durante lo sviluppo di alcuni siti, mi sono trovato nella situazione di dover rendere le pagine responsive e ho dovuto definire nuove regole e meccanismi per ottimizzare l’esperienza utente, in particolare impedire lo zoom involontario delle pagine durante la navigazione sui dispositivi mobile. In questo articolo, condividerò con i web designer che si trovano nella stessa situazione in cui mi trovavo allora, come affrontare efficacemente questa sfida.
L’obiettivo è fornire una guida pratica per garantire che le pagine web siano ottimizzate per dispositivi mobili e che gli utenti possano navigare senza inconvenienti. Scopriremo le tecniche e gli strumenti che possono essere utilizzati per gestire il comportamento dello zoom e migliorare complessivamente l’esperienza utente.
Bloccare lo zoom delle pagine HTML per dispositivi mobile
Lo zoom dello schermo è una funzionalità fondamentale presente su tutti i dispositivi mobili, che consente agli utenti di ingrandire o ridurre la dimensione del testo, delle immagini o delle intere pagine web per migliorarne la leggibilità e la visualizzazione. Questa opzione di zoom diventa particolarmente importante quando si utilizzano dispositivi con schermi di dimensioni ridotte.
Tuttavia, durante lo sviluppo di applicazioni e siti web, è essenziale che gli sviluppatori considerino attentamente questo aspetto e ottimizzino in anticipo la visualizzazione su diverse dimensioni dello schermo. Devono prevedere e gestire in modo appropriato il comportamento del contenuto in ogni scenario, incluso il controllo dello zoom, se ritenuto necessario.
Impedire lo zoom può essere una scelta strategica quando si progetta un’interfaccia che richiede un layout specifico o che deve mantenere un certo grado di controllo sulla presentazione del contenuto. Questo approccio mira a garantire una corretta visualizzazione del sito o dell’applicazione su dispositivi mobili, evitando distorsioni o problemi di usabilità causati da zoom indesiderati.
I metodi descritti sono tre, e utilizzano rispettivamente istruzioni solo HTML, CSS o JavaScript. Sta a te utilizzare quelli che più preferisci.
Metodo 1: HTML meta viewport
Il primo metodo per bloccare lo zoom dello schermo è attraverso l’utilizzo del tag meta con proprietà viewport, che si usa anche per definire un layout responsivo. Questa tecnica è la più comune ed efficace.
Il codice da inserire nelle pagine HTML è il seguente (all’interno del tag <head>):
<meta name="viewport" content="width=device-width, user-scalable=no">Qui il parametri user-scalable=no determina l’uso dello zoom.
Metodo 2: CSS touch-action
Il secondo metodo è attraverso l’utilizzo di alcune regole CSS che possono essere impostare in un semplice tag <style> o in un file .css separato alla pagina HTML.
Queste istruzioni hanno il medesimo effetto del precedente, ma potrebbero non funzionare in tutti i browser per la navigazione web, soprattutto su quelli più vecchi e meno aggiornati.
Le regole CSS da impostare sono le seguenti:
:root {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
height: 100%
}Possibilmente, inseriscile all’inizio del tuo file CSS o comunque come prime regole da eseguire.
Metodo 3: JavaScript ontouchmove
La seguente tecnica utilizza l’evento JavaScript “ontouchmove“, dedicata proprio all’utilizzo con dispositivi con schermo touch, per catturare l’evento ed impedire lo zoom della pagina su mobile.
Anche questa tecnica potrebbe non funzionare efficacemente su tutti i dispositivi o si potrebbero ottenere risultati differenti in base all’utilizzo dell’utente o ad un’interazione differente da quella prevista.
document.addEventListener('touchmove', (e)=>{
if (e.scale !== true) {
e.preventDefault();
}
}, {
passive: false
});Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
- Come Risolvere i Problemi di Connessione Bluetooth al PC
- Guida alla Cybersecurity: Come proteggerti da minacce informatiche
- Come Aggiungere un Dizionario su App Kindle
