1

对于不同的布局（手机和平板电脑），我有不同的 CSS 文件。由于我根据我在三星 Note 8 上以 1200x800 分辨率获得的视图在平板电脑视图中添加了样式。

但是，当我在分辨率为 1920x1080 的三星 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）。

关于这篇文章响应式网页设计和高分辨率显示器（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 和媒体查询的情况下处理这种情况，如果可以，请建议。

4

1 回答 1

2

有许多基于媒体查询的方法来检测高密度/视网膜设备。

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

@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 768px。因此，相同的屏幕宽度/高度媒体查询将捕获 iPad 4（视网膜）作为 iPad 2 并且 - 除了在较旧的 iPad 的情况下更加模糊 - 看起来相同。

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

一个非常重要的例外是运行 Windows 8 Mobile 的高密度显示设备，它具有正确报告视口的已知错误。

于 2013-12-19T12:47:13.913 回答