Tworzę aplikację internetową, która zawiera dużo informacji. Oznacza to, że każdy piksel dostępny na ekranie jest bardzo pomocny, aby uniknąć interfejsu użytkownika wyglądał na zbyt zagracony i wyświetlał odpowiednie dane.
Zastanawiałem się: jaka jest „powszechna” rozdzielczość ekranu? Lata temu była to coś w rodzaju 1024 × 768, ale w dzisiejszych czasach to musi być coś znacznie wyższego. Nie mogę polegać na tym, czego używam jako programista i prawdopodobnie mam większe ekrany i rozdzielczość niż przeciętny użytkownik Joe.
Więc gdzie mogę znaleźć aktualnie zalecana rozdzielczość dla aplikacji internetowych?
Komentarze
- Zobacz to pytanie w witrynie dla webmasterów – webmasters.stackexchange.com/questions/2494/…
- Nie należy ' używać rozdzielczość ekranu, aby kierować twoimi decyzjami; musisz znać rozmiary okien przeglądarki, zwłaszcza gdy monitory mają hu nie nie możesz zakładać, że ludzie będą wyświetlać przeglądarkę na pełnym ekranie; byłoby zbyt duże, by można było je odczytać w większości witryn.
- Przeczytaj także to pytanie dotyczące układu o stałej szerokości i płynnym .
- Myślenie w kategoriach rozdzielczości ekranu, jakby to był jakiś statyczny parametr, brzmi anachronicznie. @MonicaCellio ma rację. Alokacja nieruchomości dla aplikacji jest dynamiczna i leży w rękach użytkownika.
- Uwaga: w związku z rozwojem responsywnego projektowania wiele osób zdało sobie sprawę, że ważne jest również rozważenie, co jest dobra maksymalna szerokość kolumny oraz że czytelność tekstu często można zapewnić, zbliżając się do szerokości treści właściwej dla rozmiaru czcionki, tj. 35-40em dla pełnej szerokości tekstu.
Odpowiedź
To naprawdę zależy od tego, gdzie jesteś na świecie. Na całym świecie 1366×768 jest nadal najbardziej powszechne, jednak 1920 x 1080 to jedyna rozdzielczość, która w rzeczywistości rośnie (prawdopodobnie dlatego, że wydaje się, że jest to standardowy ekran panoramiczny dla nowoczesnych laptopów).
Witryna StatCounter.com powinna pomóc w uzyskaniu dodatkowej wiedzy na ten temat.
JEDNAK , pamiętaj, że tylko dlatego, że niektóre rozdzielczości są częstsze niż inne, nie uwzględnia to, jak szeroka jest przeglądarka użytkownika okna. Niestety, istnieje niewiele znanych pomiarów dla tej statystyki (Google Analytics zapewniał ją, ale przestała ją wspierać).
Komentarze
- Ponadto światowe średnie dla tego rodzaju danych mogą (nie będą) takie same jak w przypadku bazy użytkowników. Dopóki nie spróbujesz swoich RZECZYWISTYCH użytkowników, nie ' wiem, czego ' używają. Dlatego najlepiej jest zaprojektować układ tak, aby działał w wielu (i różnych) rozdzielczościach.
- Dane dotyczące rozkładu rozdzielczości ekranu na smartfony i tablety z systemem Android i iOS można znaleźć w Rozwiązanie ' pod koniec sekcji opensignalmaps.com/reports/fragmentation.php . Dogodnie w tym przypadku rozdzielczość ekranu z większym prawdopodobieństwem będzie przybliżać wymiary widocznego obszaru / okna przeglądarki na smartfonach i tabletach niż na laptopach i komputerach stacjonarnych. Niedogodnie dla Androida, fragmentacja platformy ' jest dość wyraźna w szerokim rozkładzie rozdzielczości ekranu. To prawdopodobnie sprawiłoby, że płynny układ dla urządzeń mobilnych byłby dobrym pomysłem.
- Tak jak aktualizacja, 1366×768 znacznie wyprzedziło 1024×768 od czasu opublikowania tej odpowiedzi.
- @DangerZone Dobra uwaga . Niestety StatCounter nie ' nie oferuje linków do ' aktualnych ', ponieważ zawsze wymagają one dodania sufiksu zakres dat (stąd kilka zmian tej odpowiedzi na przestrzeni lat!). Poprawiłem odpowiedź, wprowadzając aktualne statystyki. Myślę, że ' będę musiał zrobić to samo za mniej więcej rok!
Odpowiedź
Pamiętaj, że laptopy i komputery stacjonarne nie są już jedynymi urządzeniami z dostępem do Internetu. IPad ma rozdzielczość 1024×768, iPhone 4 ma rozdzielczość 960×640, zakładając, że używasz ich w trybie poziomym.
Komentarze
- Afaik the iPhone 4 renderuje strony tak, jakby miał starą rozdzielczość 480 * 320. Strony na moich 4 są ' o połowę mniejsze niż w sieci 3GS. Dodatkowa rozdzielczość jest używana tylko do renderowania czcionek / obrazów. ' m osiągam.
- Absolutnie ważny punkt. Szerokość ekranu 960 pikseli pozostaje aktualna nawet przy wzroście rozmiaru ekranu komputera stacjonarnego, ponieważ wiele urządzeń przenośnych może również wyświetlać ten rozmiar.Nie mówiąc już o tym, że strony internetowe są nieczytelne, gdy są bardzo szerokie (ponad 1600).
Odpowiedź
Wybór minimalnej rozdzielczości ekranu zależy od liczby użytkowników, których chcesz wykluczyć.
Jeśli nie masz historii danych o rozwiązaniach dla określonych użytkowników. Jedną z opcji jest użycie publicznych, globalnych statystyk użytkowania jako wskazówki. Korzystając z jednego z takich źródeł danych globalnych, utworzyłem poniższy wykres, aby szybko przedstawić stan szerokości ekranu komputera.
Odpowiedź
„ale obecnie musi to być coś znacznie wyższego”
Każda odpowiedź tutaj wydaje się ignorować cały świat mobilny.
Jasne, ekrany komputerów stacjonarnych są coraz większe. Ale wszyscy używają też urządzeń mobilnych. Dostęp do dużej części internetu odbywa się obecnie na telefonach i tabletach.
Projektowanie adaptacyjne to naprawdę droga, którą należy obrać.
Komentarze
- TAK. To jest kluczowy punkt. Płynne projektowanie stron internetowych ma kluczowe znaczenie, ponieważ tak wiele osób korzysta obecnie z witryn internetowych z telefonów i tabletów. Tendencja do rozdzielczości to fragmentacja, a nie ekspansja.
Odpowiedź
Dlaczego nie projektujesz adaptacyjnie pod kątem „czegokolwiek” masz dostępne „?
Za pomocą javascript możesz sprawdzić rozmiar okna przeglądarki i wprowadzić pewne zmiany w arkuszu stylów. Na przykład, jeśli masz bogate graficznie, duże tło obrazu z kolumną 960 pikseli, obraz tła nie jest potrzebny dla tych z systemem 1024-768, więc nie musisz go ładować. Możesz także zmienić rozmiar czcionki, aby jak najlepiej wykorzystać dostępne miejsce na ekranie.
Odpowiedź
Najpopularniejsza rozdzielczość w 2011 roku to 1280×800. Używa go 18,09% użytkowników internetu.
Oto 10 najlepszych rozdzielczości na 2011 rok: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Komentarze
- +1 w celach informacyjnych, ale z rozdzielczością 1024×768 tuż za nią i będącą niższą z dwóch najwyższych rozdzielczości, które to powinno być prawdopodobnie większe zainteresowanie pomimo nieco niższego odsetka.
- 1024 będzie dostępne przez jakiś czas + nowe urządzenia mobilne. Dlatego zalecałbym projektowanie witryn dla tej rozdzielczości, jeśli nie planujesz projektowania rozciągliwego.
Odpowiedź
Zgadzam się z Jonem, że podczas projektowania aplikacji internetowych należy uważać, aby używać rozdzielczości pełnego ekranu jako podstawy. Ma również rację, kiedy stwierdza, że szerokoekranowy wariant 768 jest obecnie bardzo powszechny.
Ostatnio doświadczyłem jednak kilku bardzo dobrych powodów, aby zmniejszyć moją własną politykę rozdzielczości ekranu. Telewizory i laptopy multimedialne używają teraz standardu HD jako rozdzielczości. Oznacza to, że jest duża szansa, że dla kilku użytkowników rozdzielczość 1280 × 720 jest dla kilku użytkowników. Kierowanie 768, ponieważ wysokość może być trochę za duża dla wielu użytkowników.
Zobacz też: http://en.wikipedia.org/wiki/Screen_resolution
Odpowiedź
Jeśli chcesz być bezpieczny z ekranami biurkowymi / laptopami w układzie statycznym, używaj minimum 1024×768. Ale lepszą opcją jest zaprojektowanie układu płynnego (elastycznego).
Odpowiedź
Firma Microsoft opublikowała niedawno ich dane telemetryczne w tym obszarze dla użytkowników Windows 7 :
Widać, że (przynajmniej dla użytkowników, którzy wciąż są w trakcie cyklu aktualizacji), jest ogromna liczba użytkowników korzystających z ekranów 16: 9 i 16:10 zamiast 4: 3 (a wielu z nich działa z rozdzielczością 1366 × 768).
Komentarze
- Wydaje się, że nawet wewnętrznie Microsoft ignoruje mobilny krajobraz.;)
Odpowiedź
Tak, spróbuj rozważyć układ elastyczny. Jeśli planujesz wykorzystać każdy dostępny piksel, najlepszym rozwiązaniem jest pokrycie całego ekranu, musisz użyć javascript. Powinieneś przejść przez Responsive Web Design od ALA i przyjrzeć się przykład . Kiedy przeglądając ten przykład, spróbuj zmienić rozmiar przeglądarki i zobacz, jak reaguje zawartość. W ten sposób Twoja witryna może wyglądać świetnie na każdym ekranie, na przykład na komputerze stacjonarnym, laptopie, tablecie telefonu.
Komentarze
- pamiętaj, jeśli przejdziesz w trakcie korzystania z każdego dostępnego piksela może to utrudnić odczytanie tekstu przez czytelników.
Odpowiedź
Celowałem w 1280 X 1024, z układem, który będzie dostosowywał się, jeśli ograniczenia mobilne są czynnikiem.
W przeciwnym razie zwykle opieram się na analityce i staram się pamiętać o najwyższych rozdzielczościach dla danej witryny.
Odpowiedź
Kilka kwestii do rozważenia:
- Dla kogo jest ta aplikacja? Jeśli jest to wewnętrzne (np. Środowisko korporacyjne), porozmawiaj z działem IT i zobacz, jaką rozdzielczość mają ustawione ekrany pracowników. Zwłaszcza spójrz na pracowników, którzy najczęściej pracowaliby w aplikacji.
- Jeśli tak ” to aplikacja dostępna publicznie, zastanów się, jakie masz dane o rozdzielczościach swoich użytkowników. Jeśli zmienisz projekt, sprawdź statystyki bieżącej witryny i zorientuj się, jakie rozdzielczości działają Twoi użytkownicy. Możesz zauważyć tutaj pewien wzorzec (np. Ludzie mają tendencję do bardzo wysokich rozdzielczości, ponieważ są zaawansowanymi użytkownikami itp.), Ale jest szansa, że będzie to wszędzie.
- Pomyśl o danych, przedstawianie. Jeśli jest dużo siatek, być może najlepszy jest układ płynny. Następnie użytkownik może rozciągnąć ekran, aby wyświetlić więcej potrzebnych danych.
Projektowanie dla 1024 to bezpieczna droga dla internet, ale leniwy jest, jeśli nie próbujesz dowiedzieć się więcej o swoich użytkownikach przed podjęciem decyzji.
Odpowiedź
1024 * 768 nadal powinno pozostać zdrowym rozsądkiem. W przeciwnym razie naprawdę zależy to od odbiorców. Jeśli zrobisz na przykład witrynę lub aplikację dla projektantów, należy zoptymalizować ją pod kątem znacznie wyższej rozdzielczości, np. 1680 * 1050.
Należy to przetestować lub zapytać żądaną grupę odbiorców, ale 1024 * 768 jest nadal koniecznością!
W idealnym świecie byłyby różne style (CSS) dla różnych rozdzielczości i urządzeń. 🙂
Komentarze
- ” Jeśli tworzysz witrynę internetową lub aplikację na przykład dla projektantów, powinieneś opuścić ustaw czas na znacznie wyższą rozdzielczość, np. 1680 * 1050. ” Większość ' projektantów ' ma iPhoney .
- @ DA01 – Tak więc różne CSS dla różnych urządzeń.
- To pomaga, ale głównie zajmowałem się ' zoptymalizowanym dla '. Idealnie byłoby ' optymalizować dla ' wszystkich urządzeń.
Odpowiedź
Typowe rozdzielczości projektorów:
- XGA = 1024 x 768 pikseli
- WXGA = 1280 x 800 pikseli
- HD = 1920 x 1080 pikseli
- 4K = rozdzielczość 4096 x 2160
Komentarze
- Czy mógłbyś to rozwinąć? A co masz na myśli przez rozdzielczości projektora?
- przykład: jeśli masz projektor LCD PT-EX600U, po podłączeniu go do komputera rozdzielczość ekranu zmieni się na: 1028 x 768 pikseli.