mobile - 使用 screen.width 和 window.devicePixelRatio 来检测移动和/或视网膜显示器是一种糟糕的方法吗？

Question

我正在为企业开发网站。它不是任何想象中的 Web 应用程序，但我希望它在移动设备上看起来不错，而不是简单地缩放桌面版本。在对媒体查询和响应式/自适应设计方法进行了大量研究之后，我的要求是移动布局仅在用户真正位于小屏幕上时才会启动，而不仅仅是调整桌面窗口的大小，解决方案很简单，可以通过媒体来完成查询和最少的 javascript。

我想出的方法是这样的:

<script type="text/javascript"> 
var isRetina = window.devicePixelRatio > 1 ? true : false;
var isMobile = (screen.width < 768) ? true : false;

if (isMobile && isRetina) {
    SHOW MOBILE LAYOUT AND HI-RES IMAGES
} else if (isMobile && !isRetina) {
    SHOW MOBILE LAYOUT AND LO-RES IMAGES
} else if (!isMobile && isRetina) {
    <<SHOW HI_RES IMAGES>>
} else if (!isMobile && !isRetina) {
    SHOW DESKTOP LAYOUT AND LO-RES IMAGES
}
</script>

在我决定采用这种方法之前，我想我会检查一下，看看是否有问题或可怕的陷阱在等着我。或者是否有更简单/更好的方法来实现此目标。我在 SO 上搜索了很多，但没有看到任何提及使用这个完全相同的解决方案。

Answer 1

加载 CSS 布局时 javascript 不是首选方法的原因是，当浏览器呈现您的页面时，javascript 通常是最后加载的东西。这意味着在加载正确的 CSS 之前，您会在屏幕上看到您的初始布局。最简单和最理想的方法是使用 CSS3 媒体查询(像这个简单的教程这样的东西可能会有很长的路要走:http://webdesignerwall.com/tutorials/responsive-design-in-3-steps)。

您的另一个选择是使用 Modernizr 加载您的样式表或您可能希望根据视口(viewport)大小加载的其他文件。查看 Modernizr Doc ，您基本上可以“测试”用于查看网页的当前浏览器的功能和特性 - 并相应地加载文件。作为旁注，Modernizr 是一个 JS 库，因此在加载 CSS 文件时再次谨慎使用 - 众所周知，加载它们时不会出现初始布局的启动画面，但我仍然会说基于媒体查询加载布局的最佳实践是自己使用 CSS3 媒体查询。