Media query to target most of smartphone

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?

Solution 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).

Solution 2

Recently I started to work with Responsive Web Design and Media Queries, I didn't find a unique "magic" query, but after reading a lot of articles and a couple of books, I've adopted the Mobile First way to develop web pages, and I'm using some common Media Queries, here the breakpoints:

• 320 px Mobile portrait
• 480 px Mobile landscape
• 600 px Small tablet
• 768 px Tablet portrait
• 1024 px Tablet landscape/Netbook
• 1280 px & greater — Desktop

(Taken from http://fluidbaselinegrid.com/)

Hope it helps

Comments

[NLemay]

Thank you! Do you know if Galaxy S3 will accept a 480px query? It is 720 pixels wide, so it might not?

[NLemay]

I really like the idea that I should concentrate on the content of my page rather than the size of the devices that will read my content. And this solve the problem even for future devices!

[Mario Bellart]

You welcome, In my tests I found (using always the <meta name="viewport" content="width=device-width, initial-scale=1">) Galaxy S3 has 360px in portrait, and 640px (or 720px, sorry can't remember exactly) in landscape. You can try to target many devices with media queries, but, in my opinion, once you have defined your breakpoints, it's better to use a flexible layout trying to cover all devices, so, if for example, you have a flexible layout until 480px, it fits in 360px too.

[rafaelbiten]

Yep. Another thing that I would add, now that I read Mario's answer is that I also read things about the Mobile First idea but that doesn't make much sense to me. Maybe I just have to read more about it and try it myself but, when it comes to design, I think it's easier to adapt when making things smaller (like hiding not so important things); the bigger audience normally comes from desktops (and bigger res phones in the future); so why would I start with mobile? This is personal opinion, but the Mobile First idea looks "awkward" to me and I'm opened to change this with some good arguments =)

[rafaelbiten]

Indeed. Making your layout flexible is the best option in my opinion too, but in my mind, that also goes a little bit against the Mobile First idea and the use of fixed screen sizes. If you're making your design flexible, it makes no sense to use fixed breaks like 320, 480, 600 and 768 if the "layout" doesn't "break" on those sizes (while being a flexible layout). We have some standards to follow, yes, but what if the layout only starts to breaks on 530px? Why care about 600px?

[Mario Bellart]

@7th yes, but flexible is also compatible with the breakpoints, because maybe you want to change the layout structure depending on the with that you have available, for example, under 480px may be better 1 column layout, but between 480px and 728px there's enough space to make a 2 column layout. And of course, 600px could be careless, at least each developer has to assess each project and trying to define best options.