Come visualizzare la versione mobile di un sito Web su un PC

Se sei uno sviluppatore web o possiedi un'attività online, potresti essere curioso di sapere come appare un sito mobile su un desktop. L'aspetto e la funzionalità del tuo sito mobile potrebbero essere cruciali poiché più della metà del traffico Internet proviene dai telefoni. È più probabile che i clienti rimangano più a lungo su un sito o acquistino qualcosa se è visivamente accattivante. Una visualizzazione desktop potrebbe anche aiutarti ad apportare modifiche e risolvere prima eventuali problemi.

Come visualizzare la versione mobile di un sito Web su un PC

Fortunatamente, questo è un processo relativamente semplice. In questo articolo, ti mostreremo come visualizzare una versione mobile di un sito Web su diversi dispositivi e browser.

Come visualizzare la versione mobile di un sito Web in Chrome su un 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 visualizzazione dal desktop al 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:

  1. Avvia il browser Google Chrome e vai al sito che desideri visualizzare.
    Come visualizzare la versione mobile di un sito Web su un PC
  2. Premi F12 sulla tastiera per accedere a DevTools.
    Come visualizzare la versione mobile di un sito Web su un PC
  3. Quando la modalità è attivata, fai clic sull'icona "Attiva/disattiva emulazione dispositivo".
    Come visualizzare la versione mobile di un sito Web su un PC
  4. Puoi scegliere da un elenco di dispositivi iOS e Android per emularli.
    Come visualizzare la versione mobile di un sito Web su un PC
  5. Mostrerà il sito Web nella forma mobile che hai scelto.
    Come visualizzare la versione mobile di un sito Web su un PC

Quando hai finito, 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 piuttosto simile:

  1. Apri il browser Chrome.
    Come visualizzare la versione mobile di un sito Web su un PC
  2. In Chrome, vai al sito Web che desideri vedere nella versione mobile.
  3. Fai clic con il pulsante destro del mouse sulla pagina Web e seleziona "Ispeziona" dal menu.
    Come visualizzare la versione mobile di un sito Web su un PC
  4. Per accedere a Strumenti per sviluppatori, fai clic sulla scheda "Altri strumenti" e seleziona "Strumenti per sviluppatori" o premi F12 per aprire DevTools.
    Come visualizzare la versione mobile di un sito Web su un PC
  5. Si aprirà la finestra Strumenti per sviluppatori.
  6. Fare clic sull'icona di commutazione del dispositivo per passare alla modalità di visualizzazione del sito mobile.
    Come visualizzare la versione mobile di un sito Web su un PC
  7. Scegli il dispositivo mobile che desideri emulare (facoltativo).
    Come visualizzare la versione mobile di un sito Web su un PC
  8. 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.

  1. Apri il browser web Google Chrome.
    Come visualizzare la versione mobile di un sito Web su un PC
  2. Apri la pagina web a cui desideri accedere sul tuo dispositivo mobile.
    Come visualizzare la versione mobile di un sito Web su un PC
  3. Per accedere al menu, fare clic sull'icona dei tre puntini verticali.
    Come visualizzare la versione mobile di un sito Web su un PC
  4. Trascina il mouse sull'elemento Altri strumenti nell'elenco.
    Come visualizzare la versione mobile di un sito Web su un PC
  5. Seleziona "Strumenti per sviluppatori".
    Come visualizzare la versione mobile di un sito Web su un PC
  6. Si aprirà la finestra Strumenti per sviluppatori nel browser.
    Come visualizzare la versione mobile di un sito Web su un PC
  7. Attiva o disattiva la modalità di visualizzazione del sito mobile facendo clic sull'icona di commutazione del dispositivo.
    Come visualizzare la versione mobile di un sito Web su un PC

Questo farà apparire l'interfaccia utente per il sito mobile. 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 tornano utili le capacità di sviluppo web del browser Firefox. Puoi sfogliare le tue pagine web in più risoluzioni se sai come accedere alle versioni mobili dei siti web in Firefox. Segui questi passi:

  1. Apri la versione mobile del sito web che desideri vedere.
  2. Fare clic con il tasto destro sulla pagina Web e selezionare l'opzione "Ispeziona" dal menu.
    Come visualizzare la versione mobile di un sito Web su un PC
  3. Scegli la "Modalità di progettazione reattiva".
    Come visualizzare la versione mobile di un sito Web su un PC
  4. Scegli la dimensione dello schermo del sito web.
    Come visualizzare la versione mobile di un sito Web su un PC

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:

  1. Avvia Firefox sul tuo PC.
    Come visualizzare la versione mobile di un sito Web su un PC
  2. Vai al sito Web che desideri visualizzare in versione mobile.
    Come visualizzare la versione mobile di un sito Web su un PC
  3. Vai su "Impostazioni" facendo clic sull'icona a tre barre orizzontali.
    Come visualizzare la versione mobile di un sito Web su un PC
  4. Vedrai un menu a discesa in cui dovrai scegliere un'opzione "Web Developer".
    Come visualizzare la versione mobile di un sito Web su un PC
  5. Seleziona "Modalità di progettazione reattiva".
    Come visualizzare la versione mobile di un sito Web su un PC
  6. 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 su un PC

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 per quanto riguarda il browser predefinito fornito con i dispositivi Mac, Safari? Fortunatamente, è possibile visualizzare anche una versione mobile di un sito Web in Safari.

  1. Avvia il browser Safari.
    Come visualizzare la versione mobile di un sito Web su un PC
  2. Vai al sito Web che desideri visualizzare in versione mobile.
    Come visualizzare la versione mobile di un sito Web su un PC
  3. Fare clic su "Opzioni" e quindi sul menu "Sviluppo".
    Come visualizzare la versione mobile di un sito Web su un PC
  4. Dal menu a discesa, scegli "Entra in modalità Responsive Design".
    Come visualizzare la versione mobile di un sito Web su un PC
  5. Ora puoi visualizzare la versione mobile del sito web.
    Come visualizzare la versione mobile di un sito Web su un PC

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:

1. Vai al sito Web che desideri visualizzare nella visualizzazione desktop.

2. Toccare l'icona a tre punti per accedere al menu.

3. Selezionare ora l'opzione "Vista desktop".

Tieni presente che questi passaggi possono variare a seconda del telefono che stai utilizzando.

Rendere più facile la progettazione Web mobile

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 su 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 dovrebbe sempre tenere presente 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.

Hai mai provato a visualizzare una versione mobile di un sito sul tuo desktop? Quale browser preferisci utilizzare per farlo? Fateci sapere nella sezione commenti qui sotto.

Sign up and earn $1000 a day ⋙

Leave a Comment

Cosè una VPN? Vantaggi e svantaggi della rete privata virtuale VPN

Cosè una VPN? Vantaggi e svantaggi della rete privata virtuale VPN

Cos'è una VPN, quali sono i suoi vantaggi e svantaggi? Discutiamo con WebTech360 la definizione di VPN e come applicare questo modello e sistema al lavoro.

La maggior parte delle persone non utilizza queste funzionalità nascoste di Sicurezza di Windows.

La maggior parte delle persone non utilizza queste funzionalità nascoste di Sicurezza di Windows.

Windows Security non si limita a proteggere dai virus di base. Protegge dal phishing, blocca i ransomware e impedisce l'esecuzione di app dannose. Tuttavia, queste funzionalità non sono facili da individuare: sono nascoste dietro livelli di menu.

La codifica non è così difficile come pensi

La codifica non è così difficile come pensi

Una volta che avrai imparato e provato personalmente, scoprirai che la crittografia è incredibilmente facile da usare e incredibilmente pratica nella vita di tutti i giorni.

Recupera i dati cancellati con Recuva Portable in Windows 7

Recupera i dati cancellati con Recuva Portable in Windows 7

Nel seguente articolo, illustreremo le operazioni di base per recuperare i dati cancellati in Windows 7 con lo strumento di supporto Recuva Portable. Con Recuva Portable, puoi archiviarli su qualsiasi chiavetta USB e utilizzarli quando necessario. Lo strumento è compatto, semplice e facile da usare, con alcune delle seguenti funzionalità:

Come eliminare i file duplicati per risparmiare memoria sul computer utilizzando CCleaner

Come eliminare i file duplicati per risparmiare memoria sul computer utilizzando CCleaner

CCleaner esegue la scansione dei file duplicati in pochi minuti, lasciandoti poi decidere quali eliminare in sicurezza.

Perché cambiare il percorso di download predefinito in Windows 11?

Perché cambiare il percorso di download predefinito in Windows 11?

Spostare la cartella Download dall'unità C a un'altra unità su Windows 11 ti aiuterà a ridurre la capacità dell'unità C e a far funzionare il tuo computer in modo più fluido.

Come interrompere gli aggiornamenti di Windows sul PC

Come interrompere gli aggiornamenti di Windows sul PC

Si tratta di un modo per rafforzare e ottimizzare il sistema in modo che gli aggiornamenti vengano eseguiti secondo i tuoi tempi, non secondo quelli di Microsoft.

Come visualizzare le estensioni dei file, visualizzare le estensioni dei file su Windows

Come visualizzare le estensioni dei file, visualizzare le estensioni dei file su Windows

Esplora file di Windows offre numerose opzioni per modificare la visualizzazione dei file. Quello che potresti non sapere è che un'opzione importante è disabilitata per impostazione predefinita, sebbene sia fondamentale per la sicurezza del tuo sistema.

5 strumenti gratuiti per trovare spyware e adware sul tuo PC

5 strumenti gratuiti per trovare spyware e adware sul tuo PC

Con gli strumenti giusti, puoi eseguire la scansione del tuo sistema e rimuovere spyware, adware e altri programmi dannosi che potrebbero annidarsi nel tuo sistema.

14 app e software Windows di cui hai bisogno sul tuo nuovo computer

14 app e software Windows di cui hai bisogno sul tuo nuovo computer

Di seguito è riportato un elenco di software consigliati per l'installazione di un nuovo computer, in modo da poter scegliere le applicazioni più necessarie e migliori sul tuo computer!

Come clonare le impostazioni di Windows per portare il tuo flusso di lavoro ovunque

Come clonare le impostazioni di Windows per portare il tuo flusso di lavoro ovunque

Avere un intero sistema operativo su una chiavetta USB può essere molto utile, soprattutto se non si dispone di un portatile. Ma non pensare che questa funzionalità sia limitata alle distribuzioni Linux: è il momento di provare a clonare l'installazione di Windows.

Disattiva questi 7 servizi di Windows per prolungare la durata della batteria!

Disattiva questi 7 servizi di Windows per prolungare la durata della batteria!

Disattivando alcuni di questi servizi puoi risparmiare una notevole quantità di batteria senza compromettere il tuo utilizzo quotidiano.

A cosa serve la scorciatoia Ctrl + Z su Windows? Probabilmente più di quanto pensi.

A cosa serve la scorciatoia Ctrl + Z su Windows? Probabilmente più di quanto pensi.

Ctrl + Z è una combinazione di tasti estremamente comune su Windows. Ctrl + Z consente sostanzialmente di annullare le azioni in tutte le aree di Windows.

Non cliccare su nessun link abbreviato finché non sei sicuro che sia sicuro!

Non cliccare su nessun link abbreviato finché non sei sicuro che sia sicuro!

Gli URL abbreviati sono utili per ripulire i link lunghi, ma nascondono anche la destinazione reale. Se si vogliono evitare malware o phishing, cliccare su quel link alla cieca non è una scelta saggia.

Windows 11 22H2: aggiornamento Moment 1 con molte funzionalità degne di nota

Windows 11 22H2: aggiornamento Moment 1 con molte funzionalità degne di nota

Dopo una lunga attesa, è stato ufficialmente rilasciato il primo importante aggiornamento di Windows 11.