Se sei uno sviluppatore web o possiedi un’attività online, potresti essere curioso di sapere come si presenta un sito sui dispositivi mobili da desktop. L’aspetto e la funzionalità del tuo sito per dispositivi mobili potrebbero essere cruciali poiché più della metà del traffico Internet proviene dai telefoni. È più probabile che i clienti rimangano su un sito più a lungo o acquistino qualcosa se è visivamente accattivante. Vedere siti in versione mobile sul PC potrebbe anche aiutarti ad apportare modifiche e risolvere eventuali problemi. Fortunatamente, questo è un processo relativamente semplice. In questo articolo, ti mostreremo come visualizzare la modalità smartphone con il browser del PC su diversi dispositivi e browser.
Come visualizzare la versione mobile di un sito Web in Chrome su Mac
In Chrome, puoi testare il front-end e vedere se tutti i componenti del sito web funzionano correttamente utilizzando uno strumento di sviluppo integrato chiamato DevTools. Poiché fornisce scelte di dispositivi predefinite, DevTools è il modo migliore per lo sviluppatore di spostare rapidamente la vista da desktop a mobile e viceversa senza alcuna estensione per sviluppatori.
Puoi anche modificare le dimensioni dello schermo in base alle tue esigenze e regolare la larghezza e l’altezza dello schermo per vedere come apparirà il tuo sito web su schermi di dimensioni diverse. Per farlo su un Mac, segui questi passaggi:
- Avvia il browser Google Chrome e vai al sito che desideri visualizzare.
- Premi F12 sulla tastiera per accedere a DevTools.
- Quando la modalità è attiva, fai clic sull’icona “Attiva/disattiva emulazione dispositivo”.
- Puoi scegliere da un elenco di dispositivi iOS e Android per emularli.
- Mostrerà il sito web nel modulo mobile che hai scelto.
Al termine, chiudi la finestra degli strumenti per sviluppatori per chiudere la versione mobile del sito web.
Come visualizzare la versione mobile di un sito Web in Chrome su un PC Windows
Se desideri visualizzare una versione mobile di un sito Web su PC Windows in Chrome, è un processo abbastanza simile:
- Apri il browser Chrome.
- In Chrome, vai al sito web che desideri vedere nella versione mobile.
- Fare clic con il pulsante destro del mouse sulla pagina Web e selezionare “Ispeziona” dal menu.
- Per accedere a Strumenti per sviluppatori, fai clic sulla scheda “Altri strumenti” e seleziona “Strumenti per sviluppatori” o premi F12 per aprire DevTools.
- Si aprirà la finestra Strumenti per sviluppatori.
- Fare clic sull’icona Attiva/disattiva dispositivo per passare alla modalità di visualizzazione del sito mobile.
- Scegli il dispositivo mobile che desideri emulare (opzionale).
- Ora puoi modificare le dimensioni dello schermo in base alle tue esigenze.
Come visualizzare la versione mobile di un sito Web in Chrome su un Chromebook
L’accesso alla versione mobile di un sito Web in Chrome utilizzando un Chromebook è molto simile ai primi due metodi.
- Apri il browser web Google Chrome.
- Apri la pagina web a cui desideri accedere sul tuo dispositivo mobile.
- Per accedere al menu, fare clic sull’icona dei tre punti verticali.
- Trascina il mouse sull’elemento Altri strumenti nell’elenco.
- Seleziona “Strumenti per sviluppatori”.
- Si aprirà la finestra Strumenti per sviluppatori nel browser.
- Attiva o disattiva la modalità di visualizzazione del sito mobile facendo clic sull’icona di attivazione/disattivazione del dispositivo.
Verrà visualizzata l’interfaccia utente per il sito per dispositivi mobili. Puoi anche scegliere l’esperienza del dispositivo preferita selezionando la marca e il modello dalla casella a discesa. La pagina web si aggiornerà come sito desktop ogni volta che chiudi la console degli strumenti per sviluppatori.
Come visualizzare la versione mobile di un sito Web in Firefox su un Mac
Puoi utilizzare altri browser Web come Firefox per visualizzare un sito mobile su un desktop Mac. Il ridimensionamento della finestra del browser è uno dei metodi utilizzati dalla maggior parte degli sviluppatori Web per valutare il sito Web di design reattivo. Tuttavia, la maggior parte delle volte, questa alternativa non sembrerà accettabile.
È qui che le funzionalità di sviluppo web del browser Firefox tornano utili. Puoi sfogliare le tue pagine web in più risoluzioni se sai come accedere alle versioni mobili dei siti web in Firefox. Segui questi passaggi:
- Apri la versione mobile del sito web che desideri vedere.
- Fare clic con il pulsante destro del mouse sulla pagina Web e selezionare l’opzione “Ispeziona” dal menu.
- Scegli la “Modalità di progettazione reattiva”.
- Scegli la dimensione dello schermo del sito web.
Come visualizzare la versione mobile di un sito Web in Firefox su un PC Windows
I PC Windows hanno anche la possibilità di visualizzare le versioni mobili dei siti Web utilizzando Firefox. Ecco come farlo:
- Avvia Firefox sul tuo PC.
- Vai al sito web che vuoi vedere come versione mobile.
- Vai a “Impostazioni” facendo clic sull’icona a tre barre orizzontali.
- Vedrai un menu a discesa in cui dovrai scegliere un’opzione “Sviluppatore Web”.
- Seleziona “Modalità di progettazione reattiva”.
- Infine, puoi selezionare un modello di smartphone per vedere come apparirà il tuo sito su quel dispositivo.
Come visualizzare la versione mobile di un sito Web in Safari su un Mac
Abbiamo spiegato come visualizzare un sito Web mobile su un desktop utilizzando Chrome e Firefox. Ma che dire del browser predefinito fornito con i dispositivi Mac, Safari? Fortunatamente, anche qui è possibile visualizzare una versione mobile di un sito Web in Safari.
- Avvia il browser Safari.
- Vai al sito web che desideri visualizzare come versione mobile.
- Fare clic su “Opzioni” e quindi sul menu “Sviluppo”.
- Dal menu a discesa, scegli “Entra in modalità Responsive Design”.
- Ora puoi visualizzare la versione mobile del sito web.
Domande frequenti aggiuntive
Posso visualizzare la versione desktop di un sito Web sul mio telefono?
La risposta è si! Puoi passare dalla versione mobile alla versione desktop per verificarlo senza utilizzare un computer. I passaggi per passare dalla versione mobile alla versione desktop in Chrome sono i seguenti:
- Vai al sito web che vuoi vedere nella visualizzazione desktop.
- Toccare l’icona a tre punti per accedere al menu.
- Seleziona ora l’opzione “Vista desktop”.
Tieni presente che questi passaggi possono variare a seconda del telefono che stai utilizzando.
Semplificare la progettazione di siti Web mobili
Gli strumenti per sviluppatori sono ottimi per analizzare e modificare una versione mobile di un sito Web su un desktop senza cambiare dispositivo. È possibile modificare le dimensioni dello schermo per osservare come funzionano i componenti sui vari dispositivi. Puoi regolare diversi componenti e creare il sito Web per più dimensioni dello schermo utilizzando la modalità reattiva.
Quando si progetta un sito Web, il progettista deve sempre tenere a mente come appare il front-end del sito su telefoni, tablet e desktop. L’utilizzo dei metodi descritti nell’articolo può anche aiutare lo sviluppatore a farlo e anche a identificare quali componenti di un sito Web stanno creando problemi per risolverli.