Question

I wrote some CSS code to make an HTML page fit better in mobile browsers. To be sure that my CSS apply only on mobiles, I use to following media query :

@media only screen and (max-device-width: 480px)

As an iPhone developer, I tested on this device and it works really well. But I want my CSS to be use on all kind of devices (Android, Windows Phone, etc).

What would be a good resolution that would fit most of smartphone of these days? Or do I need a more complex media query?

Answer 1

Updated: Mars 2016

Projects are all different, so it’s hard to set a global rule that will fit them all. If you’re looking for one, here’s an example that someone smarter than me came up with and that I’ve used before:

xsmall:     (max-width: 479px),
small:      (max-width: 599px),
medium:     (max-width: 767px),
large:      (max-width: 1024px),
largeOnly:  (min-width: 768px) and (max-width: 1024px),
xxl:        (min-width: 1200px),
tall:       (min-height: 780px),

Note the lack of references to devices, screen sizes or orientation on their names. The size of a ‘tablet portrait’ shouldn’t really matter to us as we should try to make things responsive and look good on any screen size, not simply adaptive to a few screen sizes.

Yes, it’s important to know the most common screen sizes and avoid crazy media queries, but in the end, your design may start to beg for adjustments at 530px instead of 480px or something like that. So why not?

Now, on my personal preferences: I keep media queries in mind all the time, but at first I tend to ignore device sizes almost completely. I also prefer the desktop-first approach cause I find it easier to adjust layouts to smaller sizes (ie.: removing not so important things from the page, reducing sizes, etc.).

Original Answer

Some people tend to ignore device sizes completely. They say you should check where your layout starts to break and create media queries only when necessary. Others will check for different device sizes, as you’re doing now. But then you’ll have a media query for 320px, another for 480px, and so on… You may go crazy with that, and maybe it’s not even necessary depending on your layout!

So, for now I’m trying to do both. I tend to ignore device sizes at first and will create some media queries only when necessary (when layout breaks), until it looks good for sizes like 960px and bigger, and also for smaller screen sizes, like 320px (the smallest device size I care about).