针对高分辨率密集像素设备的媒体查询

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

试试看。