Come Vedere la Versione Mobile di un Sito Web su Chrome

Verificare come appare una pagina su un telefono non dovrebbe richiedere il possesso di dieci dispositivi. Questa guida spiega come vedere la versione mobile delle pagine di un sito web direttamente nel browser — usando la vista mobile che Chrome include già e un'estensione gratuita che somiglia molto di più a un telefono reale.

Perché controllare la vista mobile

Più della metà di tutto il traffico web è mobile, eppure i layout che appaiono perfetti su un laptop spesso si rompono su schermi più piccoli: il testo trabocca, i pulsanti si sovrappongono, le immagini si deformano. Sapere come vedere la versione mobile di un sito prima dei visitatori evita cattive prime impressioni e conversioni perse. Aiuta anche la SEO, perché i motori di ricerca posizionano le pagine in base a quanto funzionano bene su mobile.

Metodo 1: modalità dispositivo di Chrome DevTools

Il modo più rapido per ottenere la vista mobile su Chrome è la modalità dispositivo dei DevTools. Per aprirla:

1. Apri il sito web su Chrome.
2. Fai clic con il tasto destro sulla pagina e scegli Ispeziona (o premi F12).
3. Fai clic sull'icona della barra dei dispositivi, o premi Ctrl+Shift+M.
4. Scegli una dimensione dello schermo dal menu a discesa in alto.
5. Ricarica la pagina in modo che venga caricata con lo user-agent mobile.

È veloce e gratuito, ma ha limiti reali:

• Mostra solo il viewport, senza cornice del dispositivo, barra di stato o interfaccia realistica del browser.
• Non replica del tutto Safari su iOS né una specifica versione di Android.
• Confrontare più dispositivi affiancati è scomodo.
• L'interfaccia è pensata per gli sviluppatori, non per designer o team di QA.

Metodo 2: Phone Simulator per una vista realistica del dispositivo

Per un'anteprima che sembri davvero un telefono, le estensioni come Phone Simulator funzionano meglio. Renderizza la scheda corrente all'interno di una cornice di dispositivo reale, con viewport, user-agent e aspetto del sistema corretti.

Con essa puoi:

• Scegliere tra oltre 40 dispositivi: iPhone, Samsung Galaxy, Pixel, iPad, laptop e altro.
• Alternare tra verticale e orizzontale, oltre al tema chiaro e scuro.
• Vedere due dispositivi contemporaneamente (fino a 8 con PRO) con scorrimento sincronizzato.
• Fare screenshot e registrare lo schermo da condividere con il tuo team.
• Creare un dispositivo personalizzato con qualsiasi dimensione, sistema, colore e user-agent.

Per iniziare:

1. Installa Phone Simulator dal Chrome Web Store.
2. Apri il sito che vuoi controllare e fai clic sull'estensione.
3. Seleziona un dispositivo: la pagina si carica all'istante dentro una cornice realistica.
4. Cambia dispositivo o orientamento per vedere ogni layout.

Tutto questo funziona con il piano gratuito, così puoi testare il tuo sito su mobile senza pagare nulla.

Quando la vista realistica è davvero utile

Un viewport semplice va bene per un controllo rapido della larghezza, ma alcune attività richiedono il quadro completo:

• Mostrare a un cliente una vista mobile del sito che riconosca subito come un telefono.
• Controllare come un'intestazione fissa si posiziona sotto un notch o la barra di stato.
• Verificare la modalità scura su un dispositivo specifico.
• Acquisire schermate pulite per una presentazione, una scheda dello store o la documentazione.

Quale metodo usare

Se ti serve solo un rapido controllo dei pixel mentre programmi, la vista mobile dei Chrome DevTools è sufficiente. Se vuoi vedere il sito come mobile nel modo in cui lo vedono gli utenti reali, confrontare dispositivi o acquisire schermate, Phone Simulator è la scelta migliore. Padroneggiare entrambi i metodi significa avere sempre lo strumento giusto per ogni compito.