Dezvolt o aplicație web destul de grea în informație. Aceasta înseamnă că fiecare pixel disponibil pe ecran pentru afișare ajută foarte mult, pentru a evita interfața de utilizare arătând prea aglomerat și pentru a afișa date relevante.
Mă întrebam: care este rezoluția ecranului „obișnuită”? Cu ani în urmă era ceva de genul 1024 × 768, dar în zilele noastre trebuie să fie ceva mult mai mare. Nu mă pot baza pe ceea ce folosesc ca dezvoltator și probabil că am ecrane și rezoluție mai mari decât utilizatorul obișnuit Joe.
Deci, unde pot găsi rezoluția recomandată în prezent pentru webapps?
Comentarii
- Consultați această întrebare pe site-ul webmasterilor – webmasters.stackexchange.com/questions/2494/…
- Nu ar trebui să utilizați ‘ rezoluția ecranului pentru a vă ghida deciziile; trebuie să cunoașteți dimensiunile ferestrelor browserului. Mai ales că monitoarele devin hu nu puteți presupune că oamenii vor lua un browser pe ecran complet; ar fi prea mare pentru a citi majoritatea site-urilor.
- De asemenea, consultați această întrebare referitoare la lățimea fixă față de aspectul fluid .
- Gândirea în termeni de rezoluție a ecranului, ca și cum ar fi un parametru static, sună anacronic. @MonicaCellio a înțeles bine. Alocarea imobiliară pentru o aplicație este dinamică și este în mâinile utilizatorului.
- Notă: odată cu creșterea designului receptiv, mulți oameni au ajuns să-și dea seama că este, de asemenea, important să ia în considerare ceea ce este un lățime maximă bună coloană și că lizibilitatea textului poate fi adesea asigurată prin apropierea lățimii conținutului specifice dimensiunii fontului, adică 35-40em pentru o lățime solidă a textului.
Răspuns
Asta depinde într-adevăr de locul în care vă aflați în lume. La nivel mondial 1366×768 este în continuare cel mai frecvent, cu toate acestea 1920×1080 este singura rezoluție care este de fapt în creștere la preluare (probabil pentru că acesta pare să fie ecranul lat standard pentru laptopurile moderne).
Site-ul web StatCounter.com ar trebui să vă ofere câteva cunoștințe suplimentare în acest sens.
ORICUM , rețineți că doar pentru că anumite rezoluții sunt mai frecvente decât altele, acest lucru nu ține cont de cât de larg are utilizatorul browserul său fereastră. Din păcate, există puține măsurători cunoscute pentru această statistică (Google Analytics oferea acest lucru, dar a încetat să o mai susțină).
Comentarii
- De asemenea, mediile la nivel mondial pentru acest tip de date pot (nu) să fie aceleași cu cele ale bazei dvs. de utilizatori. Până când nu vă eșantionați utilizatorii ACTUALI, nu ‘ Nu știu ce ‘ utilizează. Prin urmare, cel mai bun pariu este să vă proiectați aspectul pentru a funcționa la rezoluții multiple (și diferite).
- Pentru date privind distribuția rezoluției ecranului între smartphone-urile și tabletele Android și iOS, consultați Rezoluția ‘ secțiunea spre sfârșitul opensignalmaps.com/reports/fragmentation.php . Convenabil aici, rezoluția ecranului este mai probabil să aproximeze dimensiunile ferestrei de vizualizare / browser pe smartphone-uri și tablete decât pe laptopuri și desktop-uri. Inconvenient pentru Android, fragmentarea platformei ‘ se reflectă destul de clar în distribuția largă a rezoluțiilor ecranului. Acest lucru ar face probabil aspectul fluid pentru dispozitivele mobile o idee bună.
- La fel ca o actualizare, 1366×768 a depășit cu mult 1024×768 de când a fost postat acest răspuns.
- @DangerZone Bun punct . Din păcate, StatCounter nu ‘ nu oferă linkuri către ‘ curent ‘ întrucât necesită întotdeauna sufixarea unui intervalul de date (deci mai multe modificări ale acestui răspuns de-a lungul anilor!). Am modificat răspunsul cu statistici actualizate. Cred că ‘ va trebui să fac același lucru și într-un an sau cam așa!
Răspunde
Rețineți că laptopurile și desktop-urile nu mai sunt singurele dispozitive web-enabled. IPad are o rezoluție de 1024×768, iPhone 4 are o rezoluție de 960×640, presupunând că le folosiți în modul peisaj.
Comentarii
- Afaik the iPhone 4 redă pagini ca și cum ar avea vechea rezoluție 480 * 320. Pagini de pe cele 4 mele nu sunt ‘ jumătate mai mari decât pe un 3GS. Rezoluția suplimentară este utilizată numai pentru redarea fontului / imaginii, ceea ce obțin ‘.
- Punct absolut valid. Lățimea ecranului 960 pixsel rămâne relevantă chiar și cu dimensiunile ecranului desktop în creștere, deoarece multe dispozitive portabile pot afișa și această dimensiune.Să nu mai vorbim de faptul că site-urile web sunt doar ilizibile atunci când sunt foarte largi (1600+).
Răspuns
Alegerea rezoluției minime a ecranului se reduce la numărul de utilizatori pe care sunteți dispuși să-i excludeți.
Dacă nu aveți un istoric al datelor de rezoluție pentru utilizatorii dvs. specifici, o opțiune este să utilizați statistici publice de utilizare globale ca orientare. Folosind o astfel de sursă de date globale, am creat următorul grafic pentru a transmite dintr-o privire starea lățimilor ecranului desktop.
Răspuns
„dar în zilele noastre trebuie să fie ceva mult mai mare”
Fiecare răspuns aici pare să ignore întreaga lume mobilă.
Sigur, ecranele desktop sunt din ce în ce mai mari. Dar toată lumea folosește și dispozitive mobile. O mare parte din web este acum accesată pe telefoane și tablete.
Designul adaptiv este cu adevărat calea de urmat.
Comentarii
- DA. Acesta este punctul cheie. Proiectarea web fluidă este vitală, deoarece atât de mulți oameni accesează site-uri web de pe telefoane și tablete în zilele noastre. Tendința de rezoluție este fragmentarea, nu expansiunea.
Răspuns
De ce nu proiectați adaptativ pentru „orice aveți disponibil „?
Cu javascript puteți afla dimensiunea ferestrei browserului și puteți face unele modificări ale foii de stil. de exemplu, dacă aveți un fundal de imagine mare bogat grafic, cu o coloană de 960 px, imaginea de fundal nu este necesar pentru cei care rulează 1024-768, deci nu trebuie să-l încărcați. De asemenea, vă puteți modifica dimensiunea fontului pentru a utiliza cât mai bine imobilele disponibile pe ecran.
Răspuns
Rezoluția cea mai populară în 2011 este 1280×800. 18,09% dintre utilizatorii de pe internet îl folosesc.
Iată primele 10 rezoluții pentru 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Comentarii
- +1 pentru referință, dar cu 1024×768 aproape în spate și fiind cea mai mică dintre cele două rezoluții de top, acest lucru ar trebui probabil să aibă considerare mai mare, în ciuda procentului ușor mai mic.
- 1024 va fi în jur de ceva timp + dispozitive mobile noi. Așadar, aș recomanda proiectarea de site-uri pentru această rezoluție, dacă nu intenționați să faceți un design extensibil.
Răspuns
Sunt de acord cu Jon că trebuie să ai grijă să folosești rezoluția ecranului complet ca bază atunci când proiectezi aplicații web. De asemenea, are dreptate când afirmă că varianta cu ecran lat de 768 este foarte frecventă în zilele noastre.
Am experimentat recent, însă, câteva motive foarte bune pentru a-mi reduce propria politică de rezoluție a ecranului. Televizoarele și laptopurile multimedia utilizează acum standardul HD ca rezoluție. Asta înseamnă că este o șansă bună ca mai mulți utilizatori să aibă 1280 × 720 ca rezoluție. Direcționarea 768 ca înălțime ar putea fi cam prea mare pentru mulți utilizatori.
Răspuns
Dacă doriți să fiți în siguranță cu ecranele de birou / laptop folosind un aspect static, continuați să utilizați un minim de 1024×768. Dar opțiunea mai bună este proiectarea unui aspect fluid (flexibil).
Răspuns
Microsoft a postat recent datele lor de telemetrie în această zonă pentru utilizatorii Windows 7 :
Puteți vedea că (cel puțin pentru utilizatorii care sunt încă în curs de actualizare), există o cantitate imensă de utilizatori care rulează ecrane 16: 9 și 16:10 în loc de 4: 3 (și pluralitatea acestora rulează la 1366 × 768).
Comentarii
- Se pare că chiar și intern Microsoft ignoră peisajul mobil.;)
Răspuns
Da, încercați să luați în considerare un aspect flexibil. Dacă intenționați să utilizați fiecare pixel disponibil, acoperirea ecranului complet este cea mai bună soluție, cu trebuie să utilizați javascript. Ar trebui să treceți prin Design Web Responsive de la ALA și să aruncați o privire la exemplu . Când vizualizând acest exemplu, încercați să redimensionați browserul și să vedeți cum reacționează conținutul. În acest fel, site-ul dvs. web poate arăta excelent pe orice ecran, poate fi desktop, laptop, tabletă de telefon.
Comentarii
- vă rugăm să rețineți dacă mergeți pe calea utilizării fiecărui pixel disponibil, vă poate face textul mai greu de citit de către cititorii dvs.
Răspuns
Am vizat 1280 X 1024, cu un aspect, va fi adaptabil dacă constrângerile mobile sunt un factor.
În caz contrar, mă refer la analize și încerc să fiu atent la rezoluțiile de top pentru site dat.
Răspuns
Câteva lucruri de luat în considerare:
- Pentru cine este această aplicație? Dacă este orientat spre interior (adică mediul corporativ), discutați cu IT și vedeți la ce rezoluție sunt setate ecranele angajaților. Uitați-vă mai ales la angajații care ar lucra cel mai mult în aplicație.
- Dacă „ o aplicație publică, gândiți-vă la ce date aveți despre rezoluțiile utilizatorilor dvs. Dacă reproiectați, verificați datele statistice de pe site-ul curent și înțelegeți ce rezoluții rulează utilizatorii dvs. S-ar putea să observați un model aici (adică oamenii tind să aibă rezoluții foarte mari, deoarece sunt utilizatori cu putere, etc.), dar este posibil să fie „peste tot.
- Gândiți-vă la datele pe care le rețineți prezentând. Dacă este o mulțime de rețele, poate este mai bine un aspect fluid. Atunci utilizatorul își poate întinde ecranul pentru a afișa mai multe date de care au nevoie.
Proiectarea pentru 1024 este o cale sigură pentru pe web, dar este leneș dacă nu încercați să aflați mai multe despre utilizatorii dvs. înainte de a lua o decizie.
Răspundeți
1024 * 768 ar trebui să rămână în continuare ca un bun simț. În caz contrar, depinde într-adevăr de publicul dvs. Dacă faceți un site-ul web sau aplicația pentru designeri, de exemplu, ar trebui să optimizați pentru o rezoluție mult mai mare, cum ar fi 1680 * 1050.
dar 1024 * 768 este încă obligatoriu!
Într-o lume ideală ar exista diferite stiluri (CSS) pentru rezoluții și dispozitive diferite. 🙂
Comentarii
- ” Dacă creați un site web sau o aplicație pentru designeri, de exemplu, ar trebui să timize pentru o rezoluție mult mai mare, cum ar fi 1680 * 1050. ” Majoritatea ‘ proiectanți ‘ au iPhone .
- @ DA01 – Astfel, diferitele CSS pentru diferite dispozitive.
- Asta ajută, dar mă adresam în principal ‘ optimizat pentru ‘. În mod ideal ‘ optimizați pentru ‘ toate dispozitivele.
Răspundeți
Rezoluții comune pentru proiector:
- XGA = 1024 x 768 pixeli
- WXGA = 1280 x 800 pixeli
- HD = 1920 x 1080 pixeli
- 4K = rezoluție 4096 x 2160
Comentarii
- Ați putea extinde acest lucru? Și ce vrei să spui prin rezoluțiile proiectorului?
- exemplu: dacă ai un proiector LCD PT-EX600U, atunci când ai conectat-o la computer, atunci rezoluția ecranului se va schimba la: 1028 x 768 pixeli.