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

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) {};

还有其他的组合方式。但我们无法只针对这个设备做出特定的优化而不影响到其他设备如桌面电脑、平板电脑或其他手机的布局。

如有帮助将不胜感激。

- Zach Shallbetter

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

试一下。

- Nick Beranek

---

我刚才是不是漏掉了“only”这个词，应该在“screen”之前加上它？ - Zach Shallbetter

在“portrait”之前是“orientation:”。 - Nick Beranek

那也将针对iPad 3。我想这不是你想要的。实际上，不是横向模式。iPad 3的纵向模式为768像素。可能需要再深入挖掘一下。 - Nick Beranek

更新答案以反映-webkit-min-device-pixel-ratio。-webkit-max-device-pixel-ratio将针对所有低于2的像素比率。 - Nick Beranek

这并不是什么容易的事情。处理视网膜显示器是相当新的，由于它们的分辨率与桌面设备类似，因此很难专门对其进行定位。我会再思考一下的。 - Nick Beranek