CSS media queries for modern mobile browsers

Question

I'm having a problem with my media queries where I want to target phones, tablets or computers. the problem is that today some phones and tablets have a high screen resolution.

I can´t seem to find a proper combination to achieve this. Could you help me and post the queries that you guys use for your websites? I've been working on these for days, to no avail.

Should I use some JavaScript library for this?

UPDATE:

I found a very good jquery library that seems to be very reliable with today's devices. And even though it is not being developed anymore, I found that it successfully detected all the devices tested, regular phones and tablets, high ppi phones and tablets, and desktop or laptop computers. Try it out, and see if it works for you too

Categorizr

Answer 1

There is no way to make everyone happy. For our upcoming responsive website we used a few breakpoints

768px 1024px 1280px 1920px - is our biggest, we cut off at this point

We have our server output classes on the body to detect classes (can be done with modernizr I think, never used it), for example, .iphone, android, .mobile, .phone, .tablet So if you are using an iphone we would get

.iphone and .phone on the body tag

For some pages we also defined breakpoints at 320px and 480px

We use jquery for everything, just a warning, jquery runs fairly slow on Samsung tablets, man do we hate that device

Example of media query (we use LESS)

// normal styles

@media only screen and (max-width: @maxTabletWidth) {
   // less than 1024px styles, yes I know 1280px is also tablet
}

@media only screen and (max-width: @maxPhoneWidth) {
   // less than 768px styles
}

Good luck

Answer 2

Having built quite a few responsive websites, I find that instead of specifying 'x' width for a desktop monitor, 'y' width for a tablet, and 'z' width for a mobile; it's better to use breakpoints to ensure your site works across all browser sizes.

That said, a good site to look at if you're interested in various screen sizes is screensiz.es, where you can see popularity stats as well as their physical pixel widths.

Being device agnostic means that you won't have to readapt designs, and builds when Apple, or Samsung release their super thin, or super chunky devices.

A final suggestion to aid the functionality on the variety of devices would be to employ something like Modernizr to detect touch events.

Hope that helps.