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

Question

我们正在尝试专门针对Samsung 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 */ }; 

试试看。