javascript - 响应式网络和移动设备

Question

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

对于 Web 浏览器，如果您使用 screen 对象，它会返回屏幕尺寸，而不是浏览器的当前尺寸。

两个问题:

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

Answer 1

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

宁愿坚持使用 CSS。

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

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

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