Simulatore Risoluzione Schermo Gratis
Questo simulatore di risoluzione schermo gratuito mostra la tua risoluzione dello schermo e la dimensione della finestra del browser, e visualizza in anteprima qualsiasi pagina web alla larghezza di un telefono, tablet, laptop o desktop. Scegli un dispositivo o digita una larghezza, incolla un indirizzo di pagina e la pagina si carica in un frame a quella dimensione. Una tabella delle dimensioni comuni dei dispositivi funziona anche senza JavaScript.
Screen Resolution Simulator
Domain and Server
Informazioni su questo strumento
Una pagina che appare corretta sul tuo laptop può rompersi su un piccolo telefono, e l'unico modo onesto per saperlo è guardarla a quella larghezza. Questo strumento carica la tua pagina in un frame alla larghezza che scegli, così puoi controllare menu, immagini e pulsanti a 360, 390, 768 o 1366 pixel senza possedere ogni dispositivo. Inoltre riporta la tua risoluzione dello schermo e la dimensione della finestra, che i team di supporto spesso chiedono.
I numeri sono pixel CSS, le unità che un layout di pagina web utilizza, non i pixel fisici di uno schermo. Un telefono con un display molto nitido riporta comunque un viewport di circa 360-430 pixel CSS di larghezza, che è quello in cui il tuo design deve stare. La tabella elenca le dimensioni tipiche per le classi di dispositivi popolari. I dispositivi reali differiscono, e le barre degli strumenti del browser occupano un po' di altezza, quindi considera le dimensioni come una guida approssimativa piuttosto che una misurazione esatta.
Molti siti web vietano di essere mostrati all'interno di un'altra pagina, per proteggere i visitatori da trucchi di clic. Quando un sito invia questa istruzione, questo strumento la rileva, non mostra anteprima e lo comunica, piuttosto che mostrare una casella vuota. Il tuo sito può essere incorniciato se non invia X-Frame-Options o una regola frame-ancestors. Un'anteprima incorniciata inoltre non esegue media query sul dispositivo stesso, quindi conferma i layout importanti su un telefono reale prima del lancio.
Domande frequenti
Perché l'anteprima dice che la pagina non può essere incorniciata?
Molti siti, inclusi banche, social network e grandi negozi, inviano un header che vieta di mostrare la pagina all'interno di un'altra pagina, come protezione contro il dirottamento dei clic. Il browser mostrerebbe una casella vuota, quindi lo strumento te lo comunica invece. Testa quei siti negli strumenti per sviluppatori del tuo browser in modalità dispositivo.
Qual è la differenza tra la dimensione dello schermo e la dimensione del viewport?
La dimensione dello schermo è il display completo del tuo dispositivo. Il viewport è la parte della finestra del browser che mostra la pagina web, che è più piccola a causa delle barre degli strumenti e delle barre di scorrimento. I layout reagiscono al viewport, quindi è il numero che conta per il design responsivo.
Le dimensioni dei dispositivi sono esatte?
Sono dimensioni tipiche in pixel CSS per le classi di dispositivi comuni. Telefoni e tablet variano per modello e software, e le barre del browser cambiano l'altezza. Sono abbastanza accurate per rilevare problemi di layout, ma testa sempre le pagine importanti su un dispositivo reale prima del lancio.
Questo testa il mio sito su un vero telefono?
No. Restringe il frame a una larghezza di telefono, quindi la pagina applica le sue regole di layout mobile, ma funziona comunque nel tuo browser attuale. Il comportamento tattile, i caratteri, le barre del browser e le prestazioni possono differire su un vero telefono. Usalo come controllo veloce iniziale, non come test finale.
L'indirizzo che inserisco viene salvato?
No. Il nostro server richiede la pagina una volta per leggere i suoi header di framing e poi la dimentica. L'anteprima stessa si carica direttamente dal sito web nel tuo browser. Non salviamo l'indirizzo, il contenuto della pagina o la tua risoluzione dello schermo.