3

我正在为企业开发网站。无论如何，它都不是一个网络应用程序，但我希望它在移动设备上看起来不错，而不是简单地扩展桌面版本。在对媒体查询和响应式/自适应设计方法进行大量研究之后，我的要求是移动布局只有在用户真正在小屏幕上时才会启动，而不仅仅是调整桌面窗口的大小，解决方案很简单，可以通过媒体来完成查询和最少的 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 上搜索了一堆，但没有看到任何提及使用这个完全相同的解决方案。

4

2 回答 2

1

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

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

于 2012-07-01T17:50:05.780 回答
-1

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

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

这可能会有所帮助

于 2013-09-11T14:02:23.167 回答