Crea screenshot della pagina web con la cornice del dispositivo in Chrome
Una caratteristica meno nota di Google Chrome sui sistemi operativi desktop è la possibilità di acquisire uno screenshot di una pagina aperta come se lo screenshot fosse del browser in esecuzione su un dispositivo mobile. Può persino aggiungere una cornice attorno allo screenshot in modo che sembri una foto realistica di uno smartphone. Ecco come si può fare.
C'è uno strumento speciale in Chrome Developer Tools che ti consente di emulare un dispositivo mobile. È molto utile per gli sviluppatori controllare l'aspetto dei loro siti Web su smartphone e dispositivi a piccolo schermo. Consente di specificare una dimensione dello schermo personalizzata o utilizzare dimensioni predefinite del dispositivo come iPhone, iPad, Nexus o Galaxy di Samsung. Una volta che la pagina aperta viene visualizzata nell'emulatore del dispositivo, l'utente può acquisire uno screenshot della pagina. È anche possibile abilitare una cornice del dispositivo intorno alla pagina in modo che sembri una foto realistica.
Puoi farlo come segue.
- Apri la pagina desiderata in Chrome e premi F12. Si aprirà Strumenti per sviluppatori:
- Fare clic sul pulsante dell'emulatore del dispositivo mobile per passare alla modalità Strumenti per sviluppatori:
- Sotto il selettore del dispositivo, seleziona un dispositivo. Ad esempio, selezionerò iPhone 6:
- Ora, fai clic sul menu a 3 punti a destra del selettore del dispositivo e seleziona l'opzione "Mostra cornice del dispositivo":
- Voilà, ora la tua pagina web viene visualizzata all'interno di una bella cornice del dispositivo:
Ora, fai nuovamente clic sul menu dei tre punti e seleziona "Cattura screenshot":
Il risultato sarà il seguente:
Hai fatto.
