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 回答