Mobile and desktop screen size statistics

Question

Where can I find statistics on mobile and desktop screen sizes?

Im making a responsive site and specifically what im trying to find out is weather their is a size g

Answer 1

I just finished doing a responsive business website ( https://plus.google.com/101258044853419629282/posts/GejAf734nP6 ) and here is what I can tell you - the breakpoint is definitely not 600px!

Here are the facts (in terms of CSS and @media queries):

1. 1366px desktop width just surpassed 1024px as the most popular size: http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

2. Still, on tablets, iPad with its 1024x768px is the most popular.

3. iOS Safari is sane and always reports proper viewport, ie. no matter if you have a regular iPad or Retina iPad, it will tell you it's 1024x768, similarly iPhone will tell you it's 320x480.

4. Android browser has more problems, since screens vary on this platform. For example, Nexus One has a 480x800px screen, but at 254ppi (pixel ratio 1.5) the viewport reported to CSS is actually 360x600. Even funnier Galaxy Nexus has a 1280x720px screen at 316ppi (pixel ratio 2.0, like Retina), reported viewport is 360*640.

Exception is Chrome Beta on Android 4.0, in landscape mode it has a bug and seems like it reports the viewport width as 1280px on that Galaxy Nexus, making it very difficult to not conflict with desktop CSS.

Conclusion

I personally used a breakpoint of 768px screen width, namely: I treat iPad in landscape as desktop, and I assume minimum desktop size is 1024px. But I could also assume it's 800px, like in the old days. Then, I treat 768px specifically for iPad portrait, since non-retina iPads have a lot of space, it's not quite small-screen yet. Then, everything less than 768px I call a small-screen smartphone.

For maximum optimisation you could use interim breakpoints at 640px, 600px, 480px, 360px, 320px and even 240px (low-low-end androids) but it's probably a good practice to make it totally %-based below 768px so it fits automatically.

UPDATE: one useful breakpoint I found is 810px - the width of an iframe in a Facebook tab. Helpful when you create FB apps and want to reuse your webapp code.

Answer 2

If one looks at statcounter.com and compares the numbers with sources like W3C then can be skeptical about that how they got the numbers.

If you wanna get a real stats, plz visit this site: browser display, high screen resolution

Answer 3

For the latest resolution stats change the date range in this url: http://gs.statcounter.com/#resolution-na-monthly-200903-201401

On projects I've built we have media query break point on 1024px width as this is the width of iPad 1, 2 & Mini everything below that is "Mobile" and everything above is iPad+Desktop.

This is how the @nytimes developers are doing it. see: JavaScript Jabber Podcast 093: http://javascriptjabber.com/093-jsj-the-new-york-times-and-javascript-with-eitan-konigsburg-alastair-coote-and-reed-emmons/ Where they describe this at 10:40.

For a more comprehensive list of device resolutions: http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

As always it depends who you are targeting. If you are building a site/app for kids (many of whom will have a low-end android) you may need an "ultra-mobile" version with a break point at 320px (width).

Answer 4

960 x 800 x 768 x 640 x 480 x 360 are the sizes you must follow for responsive web design