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>

在我采取这种方法之前，我想我会检查并查看是否有问题或者是否有可怕的问题等待着我。或者，如果有更简单/更好的方法来实现这一目标。我已经搜索了一大堆，没有看到任何提及使用这个完全相同的解决方案。

Answer 1

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

您拥有的另一个选项是使用Modernizr加载您可能希望根据视口大小加载的样式表或其他文件。查看Modernizr Doc，您基本上可以“测试”用于查看您网页的当前浏览器的功能和功能 - 并相应地加载文件。作为旁注，Modernizr是一个JS库，因此在加载CSS文件时再次谨慎使用 - 已知加载它们时没有初始布局的初始屏幕，但我仍然说基于媒体查询加载布局的最佳实践是自己使用CSS3媒体查询。

Answer 2

抱歉发帖回答，无法添加评论。如果放大，firefox上的window.devicePixelRatio（我相信Mac）会大于1，这可能会导致错误

navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)

这可能会有所帮助

使用screen.width和window.devicePixelRatio来检测移动和/或视网膜显示这是一种不好的方法吗？

2 个答案: