响应式 Web 和移动设备

Question

在编写响应式网站时，有时我需要对 dom 和 JavaScript 进行操作。这些通常包括涉及屏幕高度或宽度的计算。经过几个小时的挫折和使用 Google Chrome 模拟器后，我发现屏幕高度和宽度最好使用 screen.height 和 screen.width 导出，用于移动设备和网络浏览器 window.innerHeight 和 window.innerWidth。

对于网络浏览器，如果您使用screen 对象，它会返回屏幕大小，而不是浏览器的当前大小。

两个问题：

• 这是正确的方法吗？
• 如何确定我使用的是网络浏览器还是移动设备？

Answer 1

我建议不要将 JavaScript 用于响应式显示。

宁愿坚持 CSS。

您可以使用媒体查询来确定查看页面的设备的屏幕尺寸。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

您还可以使用 CSS 进行计算，例如。

.moo {
    width: calc(100% - 200px)
}