Dato che ora siamo nel primo mondo mobile, diventa sempre più importante poter testare facilmente i siti Web sui telefoni cellulari o sui telefoni emulati. Collaboro con persone che lavorano su siti Web e offerte di social media e vorrei incoraggiarli ad aprire regolarmente i siti Web dai loro browser desktop in una visualizzazione mobile. Sto pensando in particolare alla funzione di "visualizzazione mobile" incorporata nel browser, che è spesso nascosta tra tutti gli altri strumenti di sviluppo forniti da un browser, ma sono felice di considerare qualsiasi cosa sia altrettanto veloce da configurare.

Come è possibile aprire una vista mobile di un sito Web da un browser desktop?

Firefox:

• In Windows / Linux, premi Ctrl+ Shift+M
• In macOS, premi option+ command+M

Puoi anche trovare la voce di menu in ("Strumenti"), "Sviluppatore Web", "Modalità di progettazione reattiva".

Cromo:

Devi prima aprire "Strumenti per gli sviluppatori":

• In Windows / Linux, premi Ctrl+ Shift+ Io semplicementeF12
• In macOS, premi option+ command+I

Una volta che gli strumenti per sviluppatori sono aperti e focalizzati, puoi aprire la barra degli strumenti del dispositivo:

• In Windows / Linux, premi Ctrl+ Shift+M
• In macOS, premi command+ shift+M

Puoi anche trovare la voce di menu aprendo gli strumenti di sviluppo ("Altri strumenti", "Strumenti di sviluppo") e facendo clic sull'icona che assomiglia a un telefono cellulare davanti a una tabella "Attiva / disattiva barra degli strumenti del dispositivo".

Safari:

Sembra che Apple abbia disabilitato di default la scorciatoia da tastiera per accedere alla modalità di progettazione reattiva. Puoi seguire questo tutorial sulla configurazione di una scorciatoia da tastiera per questo .

Puoi trovare la voce di menu facendo clic su "Sviluppo", "Entra in Modalità progettazione reattiva". Se non riesci a visualizzare la voce di menu "Sviluppo", devi abilitarla aprendo "Preferenze", "Avanzate" e selezionando "Mostra menu Sviluppo nella barra dei menu".

Bordo:

• Premere F12per aprire gli strumenti di sviluppo, quindi Ctrl+ 7per aprire la "scheda Emulazione". Configura il dispositivo che desideri emulare.

È possibile aprire gli strumenti di sviluppo utilizzando il mouse facendo clic con il pulsante destro del mouse all'interno della pagina Web e selezionando "Ispeziona elemento".

La risposta di Flimm è corretta al 100%. Nel caso in cui ricordare le scorciatoie sia troppo fastidioso, è questo pulsante blu negli Strumenti per sviluppatori per alternare tra la visualizzazione Web e la visualizzazione mobile / tablet:

O con Firefox:

Dopo aver abilitato la barra degli strumenti del dispositivo, puoi scegliere la marca e il modello del dispositivo che desideri emulare dal menu a discesa.

Ai fini del test, utilizzo i seguenti siti Web: -

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Entrambi i siti di cui sopra mi consentono di visualizzare la mia applicazione Web in più larghezze del dispositivo.

Aggiungi un'estensione "User Agent Switcher" nel tuo browser e specifica un User Agent mobile. Se il sito Web è abbastanza intelligente , ti servirà la versione ottimizzata per dispositivi mobili.

Non consiglierò alcuna estensione specifica. Quello ideale dovrebbe avere predefiniti per i browser mobili integrati e la possibilità di abilitare o disabilitare il cambio dell'agente utente in base al sito Web.

Le risposte di cui sopra sono ottime per coloro a cui piace attenersi a un singolo browser o avere uno "spazio di lavoro" desktop limitato (ad es. Monitor singolo inferiore a 21 "a bassa risoluzione).

In realtà c'è una soluzione ancora più interessante che ho scoperto di recente: https://blisk.io/

Mi asterrò dall'utilizzare il (tipo di) "link di affiliazione" per qualsiasi guadagno personale (esiste un "sistema basato su token" che puoi guadagnare crediti per ottenere cose come "spazio cloud team" gratuito e "funzionalità premium" da utilizzare con ), ma Blisk è in realtà piuttosto elegante.

Questo "browser creato per lo sviluppo" basato su Chromium offre una moltitudine di modi per demo la pagina in vari dispositivi con un "riquadro" verticale sul lato SINISTRO, proprio come vedi gli strumenti di sviluppo di Chrome nella colonna verticale destra.

È uno sguardo da lavoro. Sebbene ci siano alcuni limiti alla sua "funzionalità estesa freemium", funziona ancora molto bene per "visualizzare in anteprima" le versioni PC e Mobile delle tue pagine / siti in un confronto affiancato. Anche le funzionalità a pagamento sembrano piuttosto interessanti se lavori in team remoti (anche se personalmente ritengo che abbia bisogno di un programma di "test drive" migliore prima di agganciare le persone al costo mensile).

Divulgazione completa: esiste un "limite di tempo" ESTREMAMENTE fastidioso al giorno sulla parte di anteprima mobile (attiva / disattiva l'icona a destra della barra degli indirizzi - cambia l'anteprima del dispositivo dal minuscolo link-to-the- menu nell'angolo in alto a destra "Mostra elenco dispositivi").

BliskDemoScreenshot

Inoltre: ho trovato alcuni trucchi davvero eleganti con le estensioni del browser come i 2 diversi "User-Agent Switcher" di Chrome / Firefox che vanno un po 'oltre, permettendoti di alternare tra le stringhe utente-browser del browser di vari sistemi operativi E i browser per loro.

Preferisco il sapore "esolutions.se" per la facilità con cui è possibile aggiungere alla lista stringhe personalizzate user-agent per tutte le personalizzazioni che si possano desiderare (funziona anche offline, il che può essere utile in alcuni casi): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Comunque, sono i miei 2 centesimi. : P