Come simulare uno schermo ad alta risoluzione? [chiuso]

93

Esiste un modo per il browser di testare i miei siti Web con risoluzioni superiori ai miei schermi?

Ad esempio: ho uno schermo 1440 x 900 e voglio testare il sito web in 1920 x 1200, 1920 x 1080, ecc.

html css resolution

— HappyDeveloper
fonte

@deceze in realtà è un ottimo suggerimento. Il punto fondamentale di cose come 960.gs che emergono è perché se lavori con le dimensioni dei pixel, il tuo design sembra lo stesso ovunque, occupa solo diverse quantità di spazio sullo schermo in base alla risoluzione dello schermo. Non è necessario testare la ripetizione orizzontale della grafica ad alta risoluzione fintanto che è possibile vedere un intero 2 e un po 'di ripetizioni per garantire che le cuciture siano allineate. Oppure puoi semplicemente usare il principio della cicala per produrre qualcosa di più interessante.

— Endophage

1

@ Endophage: non sono d'accordo. La creazione di layout fluidi in modo appropriato offre spesso risultati migliori per quanto riguarda, ad esempio, le preferenze delle dimensioni dei caratteri dell'utente. Guardare lo stesso ovunque non è essenziale, è solo pixel-peeping.

— Tu

@You Devo ancora vedere un layout fluido che cambia la dimensione del carattere. Nota il motivo per cui le larghezze di pixel fisse sono buone è perché l'occhio umano fatica a scansionare le linee su una certa lunghezza (credo che siano state trovate circa 20 parole con una dimensione del carattere di circa 12 px, puoi cercarlo tu stesso). Se stai parlando di passare alle risoluzioni del telefono è una storia diversa, ma se stai parlando di risoluzioni per desktop / laptop, se ho solo uno schermo grande con un'alta risoluzione e ridimensiono la finestra, sto effettivamente testando per risoluzioni differenti.

— Endophage

1

@Endophage: da qui la necessità di utilizzare 40em(o una misura simile), non 960pxcome larghezza. I pixel non si ridimensionano quando decido che la dimensione del tuo carattere di 12 px è troppo piccola per me e premi Cmd- +. Inoltre, la finestra del mio browser è appena 960px così com'è.

— Tu

@ In realtà, i pixel si ridimensionano quando si preme Ctrl/Cmd +perché è una funzione di zoom. Puoi provarlo proprio qui su SO. La sezione dei contenuti principali è larga 960 px. L'uso di qualcosa come 40em non scalerà con la risoluzione dello schermo. L'uso delle emdimensioni è relativo alla dimensione del carattere dell'elemento genitore che viene ereditato fino a 1em / 16px al livello superiore a meno che non venga sovrascritto (e mi scuso, avrebbe dovuto essere 12pt non px nel mio commento precedente). Leggi: kyleschaeffer.com/best-practices/…

— Endophage

76

[Modifica: controlla prima i devtools del tuo browser! Come sottolinea @SkylarIttner nei commenti, gli strumenti per i test di responsive design sono stati implementati nella maggior parte dei browser da quando è stata pubblicata la soluzione seguente. Probabilmente sono l'opzione migliore / più semplice ora.]

Potresti, correggermi se sbaglio, creare semplicemente un iframe con style="desired width & height"e src="your/test.site"come unico figlio di <body>. Dovrebbe visualizzare il sito come se la risoluzione fosse la larghezza / altezza specificata e generare barre di scorrimento per esaminarlo.

Non è comodo come usare una terza parte, dovendo configurarlo da soli, ma ha il vantaggio di poter testare localmente senza connessione Internet.

— Cody Crumrine
fonte

5

Perché ... devo dire che è geniale. +1

— Mafia

Ovviamente! Grazie! ^^

— Oskar Duveborn,

Non posso ringraziarti abbastanza!

— Rahman Sharif

1

Grazie per tutti i feedback positivi ragazzi. È bello sapere quando le cose sono utili.

— Cody Crumrine

1

Nel caso in cui aiuti qualcuno, ecco il codice di esempio per fare ciò che @Cody Crumrine ha suggerito ed è Genius !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>

— Stuart

28

Questa soluzione è molto più veloce di quelle proposte sopra:

http://www.infobyip.com/testwebsiteresolution.php

Non è versatile come browsershots.org ma è molto più veloce (pochi secondi contro una coda di 45 minuti).

— Kyle
fonte

Questa non è una cattiva risposta. Tuttavia, quel sito non fornisce assolutamente nulla che non puoi già fare da solo ridimensionando semplicemente la finestra del browser su qualsiasi computer desktop. IMHO, i collegamenti in quella pagina per tablet e telefoni sono totalmente inutili ... perché su un piccolo schermo di iPod, il mio sito di 1000 pixel viene ridimensionato automaticamente da Mobile Safari per essere visualizzato perfettamente.

— Sparky

4

@ Sparky672, personalmente non posso ridimensionare il mio browser in modo che sia più grande della risoluzione dello schermo. L'OP chiedeva di vedere 1920 su un 1440. Forse c'è un modo, ma è facile come la soluzione di infobyip? Mi scuso se sto trascurando qualcosa di ovvio (mi sento come se potessi esserlo).

— Kyle

2

Grazie @ Sparky672 e nessun problema. Ma non dovresti cancellare il tuo commento "quel sito non fornisce assolutamente nulla che non puoi già fare da solo ridimensionando semplicemente la finestra del browser su qualsiasi computer desktop" dal momento che non è vero?

— Kyle

1

@ Sparky672, che dire del verticale?

— Kyle

1

Uso verticale per vedere cosa cade sopra e sotto la piega. Lo combino con StatsCounter e MouseFlow per vedere quale percentuale del pubblico vede cosa. Ti amo Sparky! Penso che tu stia leggendo il mio tono sbagliato. E volevo essere d'aiuto. Nessuno esaminerà la soluzione che fornisco con 0 voti e un elenco di commenti. Ma vabbè ...

— Kyle

9

Qualche idea:

Usa lo zoom del browser, 1024x768 50% di zoom = 2048x1536 risoluzione simulata, so che Chrome ridimensiona le immagini e simili. Le cose diventano difficili da leggere, ma presumo che tu stia testando il posizionamento e simili.

Inoltre è possibile utilizzare alcuni programmi di screenshot per acquisire schermate a risoluzione superiore al normale (il fireshot su Firefox mi ha permesso di farlo, ma aveva problemi di memoria con risoluzioni molto alte e non è più gratuito).

— StrangeWill
fonte

6

Una soluzione, forse eccessiva, potrebbe essere quella di utilizzare Xvfb : impostare la risoluzione e la profondità del colore desiderate, caricare la pagina nei browser e acquisire gli screenshot.

— Eugen Constantin Dinca
fonte

4

Prova viewlike.us o screen-resolution.com . Non sono tutte le risoluzioni possibili, ma almeno quelle più comuni.

Non li ho provati ma sembra abbastanza semplice.

— Eddie Cheng
fonte

screen-resolution genera questo: "Your Screen Resolution is too small Il popup che hai selezionato è troppo grande per la risoluzione dello schermo che utilizzi. La risoluzione dello schermo è di 1440 pixel per 900 pixel. La finestra popup che hai tentato di aprire è 1920 pixel per 1200. "

— HappyDeveloper

visualizzazione come noi lancia questo: "Proibito Non hai il permesso di accedere a / su questo server. Inoltre, si è verificato un errore 404 Non trovato durante il tentativo di utilizzare un ErrorDocument per gestire la richiesta. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Server at viewlike.us Port 80 "

— HappyDeveloper

2

Anche se questo non ti dirà la risoluzione esatta del tuo test, puoi utilizzare lo zoomstrumento in Chrome o FF per ridurre lo zoom. Questo darà un'idea abbastanza precisa di come appare il sito su schermi ad alta risoluzione.

— Jason Gennaro
fonte

2

Se ti va bene vedere solo uno screenshot statico del tuo sito, ti consiglio http://browsershots.org/

Ti danno la possibilità di vedere le schermate del tuo sito praticamente in qualsiasi combinazione browser / sistema operativo, inclusa la possibilità di specificare le dimensioni dello schermo, oltre a un sacco di altre opzioni.

Vale la pena aggiungere un segnalibro.

— Spudley
fonte

1

Potresti provare wkhtmltoimage , che può acquisire schermate a risoluzioni arbitrarie.

Inoltre, in KDE4 è possibile ingrandire una finestra oltre la dimensione dello schermo. Penso di averlo visto anche in Windows 7. Non sono sicuro di altri sistemi operativi.

— user123444555621
fonte

1

IE9 ti consente di ridimensionare la finestra del browser a una dimensione arbitraria: premi F12 per gli strumenti di sviluppo, vai su Strumenti | Ridimensiona e scegli la tua taglia preferita. Quindi utilizzare uno strumento in grado di catturare finestre fuori schermo se la finestra è più grande dello schermo. Questo articolo sembra indicare che Snagit può farlo. Quindi dai un'occhiata alla foto catturata.

— Jaco Briers
fonte