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.

回答1:

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.

来源：https://stackoverflow.com/questions/11675084/media-queries-to-target-high-resolution-dense-pixel-devices