媒体查询目标高分辨率像素密集设备 [英] Media queries to target high resolution dense pixel devices

问题描述

我们正在尝试专门针对三星的Galaxy Nexus。它拥有1280×720为2的像素密度，这导致它，就好像是一个桌面设备上显示的页面的分辨率。

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.

我们已经尝试

@media屏（最大设备宽度：720像素）和（-webkit-MAX设备像素比：2）和（纵向）{};

和

@media屏（最大设备宽度：720像素）和（-webkit-MAX设备像素比：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.

任何帮助将是AP preciated。

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

尝试了这一点。

这篇关于媒体查询目标高分辨率像素密集设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！