Jag utvecklar en webbapplikation som är ganska informationstung. Detta innebär att varje pixel som finns tillgänglig på skärmen för visning hjälper mycket, för att undvika användargränssnittet ser för rörigt ut och för att visa relevant data.
Jag undrade: vilken är den ”vanliga” skärmupplösningen? För flera år sedan var det ungefär 1024 × 768, men nuförtiden måste det vara något mycket högre. Jag kan inte lita på vad jag använder som jag är utvecklare och jag har förmodligen större skärmar och upplösning än den genomsnittliga Joe-användaren.
Så, var kan jag hitta den rekommenderade upplösningen för webbappar?
Kommentarer
- Se den här frågan på webbplatsen för webbansvariga – webmasters.stackexchange.com/questions/2494/…
- Du bör inte använda ’ skärmupplösning för att styra dina beslut, du måste känna till storlekarna på webbläsarfönstren. Speciellt när skärmarna får hu ge du kan inte anta att människor tar en webbläsare i helskärm; det skulle vara för stort för att läsa de flesta webbplatser.
- Se även den här frågan angående fast bredd jämfört med flytande layout .
- Att tänka i termer av skärmupplösning, som om det är någon statisk parameter, låter anakronistiskt. @MonicaCellio fick poängen rätt. Fastighetsallokering för en applikation är dynamisk och ligger i användarens händer.
- Obs! Med en responsiv design som växer har många människor insett att det också är viktigt att överväga vad som är en bra maximal kolumn bredd, och att läsbarheten av text ofta kan säkerställas genom att närma sig bredden på innehåll som är specifikt för teckenstorlek, dvs. 35-40em för en solid textbredd.
Svar
Det beror verkligen på var du är i världen. Globalt 1366×768 är fortfarande det vanligaste, dock 1920×1080 är den enda upplösningen som faktiskt ökar i användningen (förmodligen för att detta verkar vara standardwidescreen för moderna bärbara datorer).
Webbplatsen StatCounter.com borde hjälpa dig att ge dig ytterligare kunskap om detta.
, kom dock ihåg att bara för att vissa upplösningar är vanligare än andra så tar det inte hänsyn till hur bred användaren har sin webbläsare Tyvärr finns det få kända mätningar för denna statistik (Google Analytics använde för att tillhandahålla detta, men har slutat stödja den).
Kommentarer
- De globala medelvärdena för denna typ av data kanske (kommer) inte att vara desamma som för din användarbas. Tills du provar dina FAKTA användare, gör du inte ’ vet inte vad de ’ använder. Därför är det bästa alternativet att utforma din layout så att den fungerar med flera (och varierande) upplösningar.
- För information om fördelningen av skärmupplösning mellan Android- och iOS-smartphones och surfplattor, se Upplösning ’ avsnitt mot slutet av opensignalmaps.com/reports/fragmentation.php . Bekvämt här är det mer troligt att skärmupplösningen kommer att ungefärliga dimensioner för visningsport / webbläsarfönster på smartphones och surfplattor än på bärbara datorer och stationära datorer. Obehagligt för Android återspeglas plattformens ’ fragmentering ganska starkt i den stora fördelningen av skärmupplösningar. Detta skulle förmodligen göra flytande layout för mobila enheter till en bra idé.
- Precis som en uppdatering har 1366×768 gått över 1024×768 med ganska mycket sedan detta svar publicerades.
- @DangerZone Bra poäng . Tyvärr erbjuder StatCounter inte ’ t länkar till ’ nuvarande ’ eftersom de alltid kräver ett suffix datumintervall (följaktligen flera ändringar av detta svar under åren!). Ive ändrade svaret med uppdaterad statistik. Jag antar att jag ’ måste göra detsamma om ett år eller så!
Svar
Tänk på att bärbara datorer och stationära datorer inte längre är de enda webbaktiverade enheterna. IPad har en upplösning på 1024×768, iPhone 4 har en upplösning på 960×640, förutsatt att du använder dem i liggande läge.
Kommentarer
- Afaik the iPhone 4 gör sidor som om den skulle ha den gamla 480 * 320-upplösningen. Sidor på mina fyra är ’ t hälften så stora som på en 3GS. Den extra upplösningen används bara för teckensnitt / bildåtergivning är vad jag ’ kommer till.
- Helt giltig punkt. 960 pixlar skärmbredd förblir relevant även med skärmstorlekar på skrivbordet, eftersom många handhållna enheter också kan visa denna storlek.För att inte tala om att webbplatser bara är oläsliga när de är mycket breda (1600+).
Svar
Valet av lägsta skärmupplösning kommer alla ner till hur många användare du är villiga att utesluta.
Om du har inte en historik med upplösningsdata för dina specifika användare, ett alternativ är att använda allmän, global användningsstatistik som riktlinje. Med hjälp av en sådan källa av globala data skapade jag följande graf för att överföra statusen för skärmbredden på skrivbordet med en överblick.
Svar
”men nuförtiden måste det vara något mycket högre”
Varje svar här verkar ignorera hela mobilvärlden.
Visst, skrivbordsskärmar blir större. Men alla använder också mobila enheter. Så mycket av webben nås nu på telefoner och surfplattor.
Adaptiv design är verkligen vägen att ta.
Kommentarer
- JA. Detta är nyckelpunkten. Flytande webbdesign är viktigt eftersom så många människor besöker webbplatser från telefoner och surfplattor idag. Upplösningstrenden är fragmentering, inte expansion.
Svar
Varför designar du inte anpassningsbart för ”vad som helst du har tillgängligt ”?
Med javascript kan du ta reda på webbläsarens fönsterstorlek och göra några formatmalländringar. om du till exempel har en grafiskt rik, stor bildbakgrund med en kolumn på 960 px, bakgrundsbilden behövs inte för de som kör 1024-768, så du behöver inte ladda det. Du kan också ändra din teckenstorlek för att utnyttja den tillgängliga fastigheten på skärmen på bästa sätt.
Svar
Mest populära upplösningen 2011 är 1280×800. 18,09% av användarna på internet använder det.
Här är topp 10-upplösningarna för 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Kommentarer
- +1 för referensen, men med 1024×768 nära och bakom och vara den lägre av de två bästa upplösningarna borde detta kanske ha högre hänsyn trots något lägre procentsats.
- 1024 kommer att vara kvar ett tag + nya mobila enheter. Så jag rekommenderar att du utformar webbplatser för den här upplösningen om du inte planerar att göra stretchbar design.
Svar
Jag håller med Jon om att man bör vara försiktig med att använda helskärmsupplösningen som bas när man utformar webbappar. Han har också rätt när han säger att widescreen-versionen av 768 är väldigt vanlig idag.
Jag har dock nyligen upplevt några mycket goda skäl att minska min egen policy för skärmupplösning. TV-apparater och multimedia-bärbara datorer använder nu HD-standarden som sin upplösning. Det betyder att det är en god chans att flera användare har 1280 × 720 som sin upplösning. Inriktning 768 som höjd kan vara lite för mycket för många användare.
Svar
Om du vill vara säker med skrivbords- / bärbara skärmar med statisk layout, fortsätt använda ett minimum av 1024×768. Men det bättre alternativet är att utforma en flytande (flexibel) layout.
Svar
Microsoft publicerade nyligen deras telemeterdata i detta område för Windows 7-användare :
Du kan se att (åtminstone för användare som fortfarande är i uppgraderingscykeln) finns det en stor mängd användare som kör skärmarna 16: 9 och 16:10 istället för 4: 3 (och flertalet av dem körs vid 1366 × 768).
Kommentarer
- Verkar att även internt ignorerar Microsoft mobillandskapet.;)
Svar
Ja, försök att överväga en flexibel layout. Om du planerar att använda alla tillgängliga pixlar är det den bästa lösningen att täcka helskärmen med måste använda javascript. Du bör gå igenom Responsive Web Design från ALA och titta på exempel . När tittar på detta exempel, försök att ändra storlek på din webbläsare och se hur innehållet reagerar. På så sätt kan din webbplats se bra ut på vilken skärm som helst, kan det vara stationär, bärbar dator, surfplatta.
Kommentarer
- Observera om du går längs vägen för att använda varje tillgänglig pixel kan det göra din text svårare att läsa av dina läsare.
Svar
Jag har inriktat mig på 1280 X 1024, med en layout kommer det att vara anpassningsbart om mobilbegränsningar är en faktor.
Annars brukar jag hänvisa till analys och försöka vara medveten om de bästa upplösningarna för given webbplats.
Svar
Några saker att tänka på:
- Vem är den här appen för? Om det är internt (dvs företagsmiljö), prata med IT och se vilken upplösning anställdas skärmar är inställda på. Titta särskilt på de anställda som skulle arbeta mest i appen.
- Om det ” en allmän app, tänk på vilken data du har om dina användares ”upplösningar. Om du omformar, kontrollera analyserna på den aktuella webbplatsen och få en uppfattning om vilka upplösningar dina användare kör. Du kanske märker ett mönster här (dvs. människor tenderar att ha mycket höga upplösningar eftersom de är kraftanvändare osv.), Men chansen är att det kommer att vara överallt.
- Tänk på de data du är presenterar. Om det är många nät, kanske en flytande layout är bäst. Då kan användaren sträcka sin skärm för att visa mer av den data de behöver.
Att designa för 1024 är en säker väg för på nätet, men det är lat om du inte försöker lära dig mer om dina användare innan du fattar ett beslut.
Svar
1024 * 768 bör fortfarande förbli som en sunt förnuft. Annars beror det verkligen på din publik. Om du gör en webbplats eller app för designers, till exempel, bör du optimera för mycket högre upplösning som 1680 * 1050.
Du bör testa det eller fråga från din önskade målgrupp, men 1024 * 768 är fortfarande ett måste!
I en idealisk värld skulle det finnas olika (CSS) stilar för olika upplösningar och enheter. 🙂
Kommentarer
- ” Om du till exempel skapar en webbplats eller app för designers bör du öppna timera för mycket högre upplösning som 1680 * 1050. ” De flesta ’ designers ’ har iPhones .
- @ DA01 – Således olika CSS för olika enheter.
- Det hjälper, men jag adresserade främst ’ optimerad för ’. Helst ’ optimerar du för ’ alla enheter.
Svar
Vanliga projektorupplösningar:
- XGA = 1024 x 768 pixlar
- WXGA = 1280 x 800 pixlar
- HD = 1920 x 1080 pixlar
- 4K = 4096 x 2160 upplösning
Kommentarer
- Kan du utöka det här? Och vad menar du med projektorupplösningar?
- exempel: om du har en PT-EX600U LCD-projektor, när du ansluter den till din dator, ändras skärmupplösningen till: 1028 x 768 pixlar.