2012-04-05 4 views
22

Dove posso trovare le statistiche sulle dimensioni dello schermo del desktop e dei dispositivi mobili?Statistiche sulle dimensioni dello schermo per dispositivi mobili e desktop

Im fare un sito reattivo e in particolare quello che sto cercando di scoprire è il loro è un divario di dimensioni tra la maggior parte dei telefoni e utenti desktop e tablet in cui posso mettere un punto di interruzione. Penso che dovrebbe esserci ma so che dovrei testare le mie ipotesi.

Quindi, per essere chiari, voglio che i telefoni abbiano un solo set di stili, tablet e desktop per avere un altro set.

Grazie

+0

EG Se metto un punto di interruzione a 600px di larghezza, presumibilmente quasi tutti i desktop e tablet sarebbe più grande, e quasi tutti i telefoni sarebbero essere più piccolo? – Evans

risposta

40

Ho appena finito di fare un sito web aziendale reattivo (https://plus.google.com/101258044853419629282/posts/GejAf734nP6) e qui è quello che vi posso dire - il punto di interruzione non è sicuramente 600px!

Ecco i fatti (in termini di CSS e @media query):

  1. 1366px larghezza del desktop appena superato 1024px come il formato più popolare: http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

  2. Eppure, su tavolette, iPad con il suo 1024x768px è il più popolare.

  3. iOS Safari è sano di mente e segnala sempre una vista corretta, es. non importa se hai un normale iPad o iPad Retina, ti dirà che è 1024x768, in modo simile iPhone ti dirà che è 320x480.

  4. Il browser Android presenta più problemi, poiché gli schermi variano su questa piattaforma. Ad esempio, Nexus One ha uno schermo 480x800px, ma a 254ppi (pixel ratio 1.5) il viewport riferito al CSS è in realtà 360x600. Anche il più divertente Galaxy Nexus ha uno schermo 1280x720px a 316ppi (pixel ratio 2.0, come Retina), il viewport riportato è 360 * 640.

eccezione è Chrome Beta su Android 4.0, in modalità orizzontale ha un bug e sembra che riporta la larghezza viewport come 1280px su quel Galaxy Nexus, il che rende molto difficile non entrare in conflitto con i CSS desktop.

Conclusione

ho usato personalmente un punto di interruzione di 768px larghezza dello schermo, vale a dire: mi trattano iPad nel paesaggio come desktop, e presumo dimensione minima del desktop è 1024px. Ma potrei anche supporre che sia 800px, come ai vecchi tempi. Quindi, considero 768px specificamente per iPad portrait, dal momento che gli iPad non retina hanno molto spazio, non è ancora abbastanza piccolo. Quindi, tutto meno di 768px chiamo uno smartphone di dimensioni ridotte.

Per ottenere la massima ottimizzazione è possibile utilizzare i punti di interruzione intermedio al 640px, 600px, 480px, 360px, 320px e anche 240px (androidi basso di fascia bassa), ma probabilmente è una buona pratica per renderlo totalmente% basata su di sotto 768px così si adatta automaticamente

UPDATE: un breakpoint utile che ho trovato è 810px: la larghezza di un iframe in una scheda di Facebook. Utile quando crei app FB e vuoi riutilizzare il tuo codice webapp.

+1

Non ho chiarito la domanda, ma con il cellulare intendo solo telefoni, tablet che voglio trattare come desktop. Sembra che la larghezza minima per un tablet sia 768. Quindi, se scelgo larghezze inferiori a 768 per i miei fogli di stile "mobili", posso tranquillamente supporre che nessun dispositivo tablet acquisirà questi stili? Grazie – Evans

+0

A giudicare da Wikipedia (https://en.wikipedia.org/wiki/Comparison_of_Android_devices#Tablet_computers) il tablet più piccolo di mente è in effetti 768 di larghezza. Vedo alcuni schermi più piccoli in quella lista, ma non puoi davvero chiamarlo tablet. Quindi, se si imposta il punto di interruzione su ** max-width: 767px **, i tablet sane mostreranno la versione desktop sia in orizzontale che in verticale. Lo stesso per tablet con larghezza 800px e rapporto pixel 1.0. Qualunque cosa più piccola o con un rapporto pixel più alto mostrerà la versione mobile. Inoltre, non credo che ci sia uno smartphone sul mercato che è 800px e pixel ratio 1.0, solo 1.5 o più – f055

+0

Grazie per la risposta, ma che cosa è un 'tablet sano'? – Evans

0

960 x 800 x 768 x 640 x 480 x 360 sono le dimensioni è necessario seguire per responsive web design

+1

Gli iPhone hanno 320 px di larghezza – Matthew

2

Per gli ultimi statistiche risoluzione modificare l'intervallo di date in questo URL: http://gs.statcounter.com/#resolution-na-monthly-200903-201401

Sui progetti che ho creato abbiamo il punto di interruzione della query multimediale su larghezza 1024px poiché questa è la larghezza di iPad 1, 2 & Mini tutto sotto che è "Mobile" e tutto quanto sopra è iPad + Desktop.

Ecco come lo fanno gli sviluppatori @nytimes. vedere: JavaScript Jabber Podcast 093: http://javascriptjabber.com/093-jsj-the-new-york-times-and-javascript-with-eitan-konigsburg-alastair-coote-and-reed-emmons/ Dove lo descrivono alle 10:40.

Per un elenco più completo delle risoluzioni dei dispositivi: http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

Come sempre Dipendeche ci si rivolge. Se stai creando un sito/app per bambini (molti dei quali avranno un Android di fascia bassa) potresti aver bisogno di una versione "ultra-mobile" con un punto di interruzione a 320px (larghezza).

-1

Se si guarda a statcounter.com e si confrontano i numeri con fonti come W3C allora può essere scettico su questo come hanno ottenuto i numeri.

Se si desidera ottenere un vero e proprio statistiche, plz visitare questo sito: browser display, high screen resolution

+0

w3schools è una raccomandazione orribile e non mi fiderei di nulla di ciò che hanno. L'unica cosa utile è l'occasionale controllo della sintassi. statcounter ha detto esattamente come ottengono le loro statistiche, ed è piuttosto semplice. http://gs.statcounter.com/faq#methodology – LocalPCGuy