Best way to catch mobile css media query

Question

I'm new to responsive css. I've learnt a lot about media queries, but I still have not figured out which is the best way to catch if the user is using a mobile or not. The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint? When using my android smartphone with Google chrome, the width of the page is about 400px, even thought the real resolution is full hd, 1080px width. Does this depends form the browser, or what? I saw that someone uses the em mesure to set the breakpoint, is this more accurate? I'd like to know about the handheld property more, too. Finally, after having read lots of different informations, can you please tell me which is the moste effective way, the best media query to catch if the client is mobile or not? Thank you.

Answer 1

The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?

There are a few theories out there on how to handle this. Some people go and find the most popular device widths and set their breakpoints at those places. This is great if you know for certain what most users on your site use. However, the downsides are that you have to mold your design to those widths and you have to continually update your code as new devices come out.

So your breakpoints would be something like:

// iPhone 6
@media only screen and (min-device-width : 375px) {
    // styles go here
}
// iPhone 6+
@media only screen and (min-device-width : 414px) {
    // styles go here
}

The other theory is to make it fully scalable at any size regardless of what the device is. The upside to this is that you can insure that your design looks great on all devices. The downside is that it makes your code a bit more bloated. the breakpoints here would be wherever you need them. I personally use this method but start with break points at 1200 and go to 1100, 1000, as needed. If I'm going mobile first I'll start with 320, 350, 400, 500, etc...

When using my android smartphone with Google chrome, the width of the page is about 400px, even thought the real resolution is full hd, 1080px width. Does this depends form the browser, or what?

The device width has many factors to it. But the device width is basically the number of pixels across that the browser is displaying. There's a little more to it than this, but your best bet is to Google device widths.

I saw that someone uses the em mesure to set the breakpoint, is this more accurate?

Nope. It's just a way of subdividing from a parent element. Until you have more time to research this, stick with pixels.

Finally, after having read lots of different informations, can you please tell me which is the moste effective way, the best media query to catch if the client is mobile or not? Thank you.

The best way to do this is to determine your break points. You cannot target mobile browsers specifically using CSS. You can only target the attributes of those browsers (width, height, orientation) so you can know that iPhone6's are 375 pixels across in portrait. So you can target them using that width. As Allan said, you can target devices with Javascript or server side libraries and add classes that way. But IMO it's better to stick with device widths and save those for situations where you're absolutely stuck.