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.
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.