breakpoints - 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 gap between the majority of phones and desktop and tablet users where I can put a breakpoint. I think that there should be but know I should test my assumptions.

So just to be clear, I want phones to have one set of styles, and tablets and desktops to have another set.

Thanks

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.