媒体查询以高分辨率密集像素设备为目标

Question

我们正在尝试专门针对三星Galaxy Nexus。它的分辨率为1280 x 720，像素密度为2，这使得它显示页面就好像它是桌面设备一样。

我们已经尝试了

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

和

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

以及其他各种组合。在不影响桌面设备，平板电脑或其他手机布局的情况下，我们似乎无法专门针对此设备。

任何帮助都将不胜感激。

Answer 1

您的媒体查询不正确：

@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 */ };

不确定你想用第二个目标做什么。您可能需要考虑添加以下媒体查询：

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

尝试一下。