Question

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

I’m making a responsive site and specifically what I’m trying to find out is whether there 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-1024×768-the-most-popular-screen-resolution-on-the-web-is-now-1366×768/

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 1024×768, similarly iPhone will tell you it’s 320×480.

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 360×600. 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.