CSS Media Query to Handle New High Resolution Mobiles Whilst Ignoring Tablets

CSS media queries that capture high-resolution phones, but not lower resolution tablets

One good option is to tailor your media queries to your content, not arbitrary device pixel sizes, by using ems.

CSS Media Query - target tablets more carefully

It's because you are using , instead of and in you media query condition .

For example:

@media handheld and (max-device-width: 1300px) and (orientation : landscape) {
   .div {....}
} 

@media screen (max-width: 449px), handheld and (orientation:landscape) { ... }

Try this one.

How do breakpoints work on modern high resolution devices?

From the article A pixel is not a pixel is not a pixel...

I do know what web developers are interested in, however. They need
CSS pixels. That is, the “pixels” that are used in CSS declarations
such as width: 300px or font-size: 14px.

These pixels have nothing to do with the actual pixel density of the
device. They’re essentially an abstract construct created specifically
for us web developers.

It’s easiest to explain when we consider zooming. If the user zooms
in, an element with width: 300px takes up more and more of the
screen, and thus becomes wider and wider when measured in device
(physical) pixels. In CSS pixels, however, the width remains 300px,
and the zooming effect is created by expanding CSS pixels as much as
is needed.

See also:

• A tale of two viewports — part one
• A tale of two viewports — part two

---

Related Topics