响应式网络和移动设备

Responsive Web and Mobile Devices

本文关键字：移动网络响应更新时间：2023-09-26

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

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

两个问题：

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

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

而是坚持使用CSS。

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

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

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