Sto sviluppando unapplicazione web che è piuttosto ricca di informazioni. Ciò significa che ogni pixel disponibile sullo schermo per la visualizzazione aiuta molto, per evitare linterfaccia utente sembra troppo disordinato e per visualizzare dati pertinenti.
Mi chiedevo: qual è la risoluzione “comune” dello schermo? Anni fa era qualcosa come 1024 × 768, ma al giorno doggi deve essere qualcosa di molto più alto. Non posso fare affidamento su ciò che uso in quanto sono uno sviluppatore e probabilmente ho schermi e risoluzione più grandi rispetto allutente medio di Joe.
Allora, dove posso trovare la risoluzione attualmente consigliata per le webapp?
Commenti
- Visualizza questa domanda sul sito dei webmaster – webmasters.stackexchange.com/questions/2494/…
- Non dovresti ‘ utilizzare risoluzione dello schermo per guidare le tue decisioni, devi conoscere le dimensioni delle finestre del browser, soprattutto quando i monitor diventano hu ge non puoi presumere che le persone utilizzeranno un browser a schermo intero; sarebbe troppo grande per leggere la maggior parte dei siti.
- Inoltre, consulta questa domanda relativa a layout a larghezza fissa e layout fluido .
- Pensare in termini di risoluzione dello schermo, come se fosse un parametro statico, sembra anacronistico. @MonicaCellio ha capito bene. Lallocazione di beni immobili per unapplicazione è dinamica ed è nelle mani dellutente.
- Nota: con laumento del responsive design, molte persone si sono rese conto che è anche importante considerare che cosè un buona larghezza massima della colonna e che la leggibilità del testo spesso può essere garantita avvicinandosi alla larghezza del contenuto specifica per la dimensione del carattere, cioè 35-40em per una larghezza di testo pieno.
Risposta
Dipende da dove ti trovi nel mondo. Nel mondo 1366 x 768 è ancora il più comune, tuttavia 1920×1080 è lunica risoluzione che sta effettivamente aumentando in termini di utilizzo (presumibilmente perché questo sembra essere il widescreen standard per i laptop moderni).
Il sito web StatCounter.com dovrebbe aiutarti a fornirti ulteriori informazioni al riguardo.
TUTTAVIA , tieni presente che solo perché alcune risoluzioni sono più comuni di altre, ciò non tiene effettivamente conto della larghezza del browser dellutente finestra. Sfortunatamente, ci sono poche misurazioni note per questa statistica (Google Analytics era solito fornirla, ma hanno smesso di supportarla).
Commenti
- Inoltre, le medie mondiali per questo tipo di dati potrebbero (saranno) non essere le stesse della tua base di utenti. Fino a quando non campionerai i tuoi utenti ACTUAL, non ‘ Non so cosa ‘ stanno utilizzando. Pertanto la soluzione migliore è progettare il layout in modo che funzioni a risoluzioni multiple (e variabili).
- Per i dati sulla distribuzione della risoluzione dello schermo tra smartphone e tablet Android e iOS, vedere il Risoluzione ‘ sezione verso la fine di opensignalmaps.com/reports/fragmentation.php . In questo caso, è più probabile che la risoluzione dello schermo si avvicini alle dimensioni della finestra del browser / visualizzazione su smartphone e tablet che su laptop e desktop. Sfortunatamente per Android, la frammentazione della piattaforma ‘ si riflette piuttosto nettamente nellampia distribuzione delle risoluzioni dello schermo. Questo probabilmente renderebbe il layout fluido per i dispositivi mobili una buona idea.
- Proprio come un aggiornamento, 1366 x 768 ha superato di un po 1024 x 768 da quando è stata pubblicata questa risposta.
- @DangerZone Buon punto . Purtroppo StatCounter non ‘ t offre link all ‘ corrente ‘ poiché richiedono sempre il suffisso a intervallo di date (quindi diverse modifiche a questa risposta nel corso degli anni!). Ho modificato la risposta con statistiche aggiornate. Immagino che ‘ dovrò fare lo stesso anche tra un anno circa!
Risposta
Tieni presente che laptop e desktop non sono più gli unici dispositivi abilitati per il Web. LiPad ha una risoluzione di 1024×768, liPhone 4 ha una risoluzione di 960×640, assumendo che tu li usi in modalità orizzontale.
Commenti
- Afaik the iPhone 4 visualizza le pagine come se avesse la vecchia risoluzione 480 * 320. Le pagine del mio 4 non sono ‘ grandi la metà di quelle di un 3GS. La risoluzione extra è usata solo per il rendering di caratteri / immagini è ciò a cui ‘ sto arrivando.
- Punto assolutamente valido. La larghezza dello schermo di 960 pixel rimane rilevante anche con laumento delle dimensioni dello schermo del desktop, perché anche molti dispositivi portatili possono mostrare queste dimensioni.Per non parlare del fatto che i siti web sono semplicemente illeggibili quando sono molto larghi (1600+).
Risposta
La scelta della risoluzione minima dello schermo dipende tutto dal numero di utenti che sei disposto a escludere.
Se non disponi di una cronologia dei dati di risoluzione per i tuoi utenti specifici, unopzione è utilizzare le statistiche di utilizzo globali e pubbliche come linea guida. Utilizzando una di queste fonti di dati globali, ho creato il seguente grafico per aiutare a trasmettere a colpo docchio lo stato delle larghezze dello schermo del desktop.
Risposta
“ma al giorno doggi deve essere qualcosa di molto più alto”
Ogni risposta qui sembra ignorare lintero mondo mobile.
Certo, gli schermi dei desktop stanno diventando più grandi. Ma tutti usano anche dispositivi mobili. Oggi si accede a gran parte del Web su telefoni e tablet.
Il design adattivo è davvero la strada da intraprendere.
Commenti
- SÌ. Questo è il punto chiave. Un web design fluido è vitale perché oggigiorno così tante persone accedono ai siti web da telefoni e tablet. La tendenza alla risoluzione è la frammentazione, non lespansione.
Risposta
Perché non si progetta in modo adattivo per “qualunque cosa hai a disposizione “?
Con javascript puoi scoprire le dimensioni della finestra del browser e apportare alcune modifiche al foglio di stile. ad esempio, se hai unimmagine di sfondo grande e graficamente ricca con una colonna di 960 px, limmagine di sfondo non è necessario per quelli che eseguono 1024-768, quindi non è necessario caricarlo. Puoi anche modificare la dimensione del carattere per utilizzare al meglio lo spazio disponibile sullo schermo.
Risposta
Risoluzione più popolare nel 2011 è 1280×800. Il 18,09% degli utenti su Internet lo utilizza.
Ecco le 10 principali risoluzioni per il 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Commenti
- +1 per il riferimento, ma con 1024×768 dietro ed essendo la più bassa delle due risoluzioni maggiori questo dovrebbe forse avere maggiore considerazione nonostante una percentuale leggermente inferiore.
- 1024 sarà disponibile per un po di tempo + nuovi dispositivi mobili. Quindi consiglierei di progettare siti per questa risoluzione, se non hai intenzione di realizzare un design estensibile.
Risposta
Sono daccordo con Jon sul fatto che si dovrebbe fare attenzione a utilizzare la risoluzione a schermo intero come base durante la progettazione di app web. Ha anche ragione quando afferma che la variante widescreen del 768 è molto comune in questi giorni.
Recentemente ho sperimentato, tuttavia, alcune ottime ragioni per diminuire la mia politica di risoluzione dello schermo. TV e laptop multimediali ora utilizzano lo standard HD come risoluzione. Ciò significa che è una buona possibilità che diversi utenti abbiano 1280 × 720 come risoluzione. Il targeting 768 come altezza potrebbe essere un po troppo per molti utenti.
Vedi anche: http://en.wikipedia.org/wiki/Screen_resolution
Rispondi
Se vuoi essere al sicuro con gli schermi di scrivania / laptop utilizzando un layout statico, continua a utilizzare un minimo di 1024 x 768. Ma lopzione migliore è progettare un layout fluido (flessibile).
Risposta
Microsoft ha recentemente pubblicato i dati di telemetria in questarea per gli utenti di Windows 7 :
Puoi vedere che (almeno per gli utenti che sono ancora nel ciclo di aggiornamento), cè “unenorme quantità di utenti che eseguono schermate 16: 9 e 16:10 invece di 4: 3 (e la pluralità di loro funzionano a 1366 × 768).
Commenti
- Sembra che anche internamente Microsoft stia ignorando il panorama mobile.;)
Risposta
Sì, prova a considerare un layout flessibile. Se prevedi di utilizzare tutti i pixel disponibili, coprire lo schermo intero è la soluzione migliore, con il è necessario utilizzare javascript. Dovresti passare attraverso il Responsive Web Design di ALA e dare unocchiata al esempio . Quando visualizzando questo esempio, prova a ridimensionare il tuo browser e guarda come reagisce il contenuto. In questo modo il tuo sito web può avere un bellaspetto su qualsiasi schermo, che sia desktop, laptop, tablet o telefono.
Commenti
- tieni presente se vai lungo il percorso di utilizzo di ogni singolo pixel disponibile può rendere il testo più difficile da leggere da parte dei lettori.
Risposta
Ho scelto come target 1280 X 1024, con un layout che sarà adattivo se i vincoli dei dispositivi mobili sono un fattore.
Altrimenti, di solito rimango allanalisi e cerco di essere consapevole delle risoluzioni massime per il dato sito.
Risposta
Alcune cose da considerare:
- Per chi è questa app? Se è rivolto verso linterno (cioè lambiente aziendale), parla con lIT e guarda a quale risoluzione sono impostati gli schermi dei dipendenti. In particolare, guarda i dipendenti che lavorerebbero di più nellapp.
- Se lo fosse ” Unapp per il pubblico, pensa a quali dati hai sulle risoluzioni dei tuoi utenti. Se stai riprogettando, controlla le analisi sul sito corrente e fatti unidea delle risoluzioni che i tuoi utenti stanno eseguendo. Potresti notare uno schema qui (ad es. Le persone tendono ad avere risoluzioni molto alte poiché sono utenti esperti, ecc.), Ma è probabile che sarà dappertutto.
- Pensa ai dati che stai presentando. Se si tratta di “molte griglie, forse è meglio un layout fluido. Quindi lutente può allungare lo schermo per mostrare più dati di cui ha bisogno.
Progettare per 1024 è un percorso sicuro per sul Web, ma è pigro se non stai cercando di saperne di più sui tuoi utenti prima di prendere una decisione.
Risposta
Il 1024 * 768 dovrebbe rimanere come un buon senso. Altrimenti dipende molto dal tuo pubblico. Se crei un sito web o app per designer, ad esempio, dovresti ottimizzare per una risoluzione molto più alta come 1680 * 1050.
Dovresti testarlo o chiedere al tuo pubblico desiderato, ma 1024 * 768 è ancora un must!
In un mondo ideale ci sarebbero diversi stili (CSS) per diverse risoluzioni e dispositivi. 🙂
Commenti
- ” Se ad esempio crei un sito web o unapp per designer, dovresti op temporizza per una risoluzione molto più alta come 1680 * 1050. ” La maggior parte dei ‘ designer ‘ ha iPhone .
- @ DA01 – Quindi, i diversi CSS per dispositivi diversi.
- Questo aiuta, ma mi riferivo principalmente al ‘ ottimizzato per ‘. Idealmente, ‘ ottimizzi per ‘ tutti i dispositivi.
Rispondi
Risoluzioni comuni per i proiettori:
- XGA = 1024 x 768 pixel
- WXGA = 1280 x 800 pixel
- HD = 1920 x 1080 pixel
- 4K = risoluzione 4096 x 2160
Commenti
- Potresti approfondire questo argomento? E cosa intendi per risoluzioni del proiettore?
- esempio: se hai un proiettore LCD PT-EX600U, quando lo colleghi al computer, la risoluzione dello schermo cambierà in: 1028 x 768 pixel.