html - 如何处理移动设备中的不同分辨率(Retina 和 HD)？

Question

我为不同的布局(手机和平板电脑)准备了不同的 CSS 文件。由于我已根据在分辨率为 1200x800 的 Samsung Note 8 上获得的 View 在平板电脑 View 中添加了样式。

但是当我在分辨率为 1920x1080 的 Samsung Galaxy tab750 上运行这个应用程序时，由于我已经根据 Note 8 调整了字体和布局，所以我得到了更小的布局和更小的字体。

所以我得到了添加另一个 CSS 文件来处理这个的建议。接下来，当我们的 QA 尝试在 iPad(Retina Display 2048x1536)上运行该应用程序时，第三个 CSS 再次在其中变得更小。

2012 年，出现了一款分辨率为 2,560x1,600 的平板电脑。 2013 年，至少有六个。我怀疑 2014 年我们会看到更多 (http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw)。

尊重这篇文章Responsive Web Design and high resolution displays (iPhone 4/5) ,

我们将使用媒体查询来获得所需的分辨率，

/* Large desktop */
@media (min-width: 1200px) {
    font-size: 18px;
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    font-size: 16px;
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    font-size: 14px;
}

/* Landscape phones and down */
@media (max-width: 480px) {
    font-size: 12px;
}

所以我担心的是我们能否处理这种情况，而无需继续添加越来越多的 CSS 和媒体查询，如果可以，请提出建议。

Answer 1

有a number of media-query based ways检测高密度/视网膜设备。

我个人倾向于使用这个，它似乎可以捕获绝大多数设备:

@media screen and (-webkit-min-device-pixel-ratio: 2),
    screen and (max--moz-device-pixel-ratio: 2),
    screen and (min-device-pixel-ratio: 2) {}

不过完全是个人喜好!

请记住，在大多数情况下，“高密度”屏幕(而不仅仅是高分辨率)出于媒体查询的目的将自己报告为非高清分辨率。

例如:Retina Apple iPad 的实际屏幕分辨率为 2,048 x 1,536，但仍报告为 1,024 x 768 像素。因此，相同的屏幕宽度/高度媒体查询将捕获 iPad 4(视网膜)和 iPad 2，并且 - 除了在旧 iPad 的情况下有点模糊 - 看起来是一样的。

如果您愿意，您可以将我上面包含的媒体查询与宽度/高度结​​合起来，以便在特定高清设备上获得更精细的目标。

一个非常重要的异常(exception)是运行 Windows 8 Mobile 的高密度显示设备，它有一个 known bug正确报告视口(viewport)。