CODEWITHSUNDEEP
androidcssmedia-queries
Zach Shallbetter
Zach Shallbetter

Reputation: 1911

Media queries to target high resolution dense pixel devices

We're trying to target the Samsung Galaxy Nexus specifically. It has a resolution of 1280 x 720 with a pixel density of 2, which causes it to display pages as though it were a desktop device.

We've tried

@media screen and (max-device-width : 720px) and (-webkit-max-device-pixel-ratio : 2) and (portrait) {};

and

@media screen and (max-device-width : 720px) and (-webkit-max-device-pixel-ratio : 2) {};

as well as a variety of other combinations. We can't seem to target this device specifically without effecting either the desktop, tablet or other phone layouts.

Any help would be appreciated.

Upvotes: 3

Views: 3417

Answers (1)

Nick Beranek
Nick Beranek

Reputation: 2751

Your media queries are incorrect:

@media only screen
and (min-device-width : 720px)
and (-webkit-min-device-pixel-ratio : 2)
and (orientation : portrait) { /* styles */ };

@media only screen
and (min-device-width : 720px)
and (-webkit-min-device-pixel-ratio : 2) { /* styles */ };

Not sure what you're trying to target with the second one. You may want to consider adding the following media query:

@media only screen
and (min-device-width : 1280px)
and (-webkit-min-device-pixel-ratio : 2)
and (orientation : landscape) { /* styles */ };

Try that out.

Upvotes: 2

Related Questions