DOM系列:视窗、设备、滚动条和文档尺寸

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

在上一节中,学习了JavaScript如何获取和设置元素位置和尺寸相关的方法,另外在JavaScript的学习笔记当中也学习了视窗宽度、位置与滚动高度相关的JavaScript方法与属性。今天继续来学习DOM中相关的知识,这篇文章将学习视窗、设备、滚动条和文档等相关的尺寸。其实在前两篇文章中都有涉及这些知识,为了让DOM系列相关的知识更完善,所以再花点时间整理一些这方面的技术点,加强印象。

时至今日,构建Web应用程序是前端主要工作之一。这些Web应用程序要面对众多不同的设备终端,也就是说,我们需要让这些Web应用程序在各种屏幕、分辨率下都应该有一个较好的展示效果。

要将一个Web应用程序适配众多终端屏幕,需要知道的是有多少可用的空间。如果你接触过Web响应式设计(Web Responsive Design),就知道,Web浏览器客户端就可以很好的处理。最简单的方式就是使用CSS的媒体查询来处理,但也有很多同学通过JavaScript对最终的结果进行一些控制。不过,使用JavaScript来做的话,有许多计算的事情要做。当然,这些计算虽然是JavaScript来处理,但最终还是由浏览器本身来完成。

当涉及到使用JavaScript控制元素位置相关的交互内容时,不能仅依赖浏览器自动帮助我们做正确的事情。我们需要主动(人肉)地去做一些相关计算。听起来可怕,事实上并没有那么可怕,接下来的内容将告诉我们怎么通过JavaScript来做这些事情。当你阅读完这篇文章之后,你会惊叹的地说,原来就是这么的简单。

测量视窗的大小

不管是什么设备,都可以通过浏览器来查看Web页面。听起来很简单,对吧。从技术上讲,这并不完全准确。实际上,你可以通过浏览器的viewport查看Web页面。

Viewport

Viewport指的是网页的显示区域,也就是不借助滚动条的情况下,用户可以看到的部分网页大小,中文译为“视窗”(或“视口”)。正常情况下,viewport和浏览器的显示窗口是一样大小的。但是,在移动设备上,两者可能不是一样大小。

比如,手机浏览器的窗口宽度可能是640px,这时viewport宽度就是640px,但是网页宽度有1200px,正常情况下,浏览器会提供横向滚动条,让用户查看窗口容纳不下的560px。另一种方法则是,将viewport设成1200px,也就是说,浏览器的显示宽度还是640px,但是网页的显示区域达到1200px,整个网页缩小了,在浏览器中可以看清楚全貌。这样一来,手机浏览器就可以看到网页在桌面浏览器上的显示效果。

简单点来说,视窗是指你的浏览器中实际用来显示网页的部分,比如像下图这样:

拿Chrome浏览器来举例,viewport不包括浏览器的地址栏、状态栏或任何其他类型的用户界面。因为这些东西会占用空间。最后有一点很重要,viewport也不包括滚动条占用的空间

言外之意,根据浏览器开启的不同设置(比如浏览器窗口状态栏、地址栏等),你的视窗大小将有所不同:

正如前面提到的,viewport是可缩放的。既然可以缩放,那就具有可缩放的相关规则。在Web页面中,可以在HTML文件的<head>中像下面指定viewport相关的规则:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
</head>

上面代码指定,viewport的缩放规则是,缩放到当前设备的屏幕宽度(device-width),初始缩放比例(initial-scale)为1倍,禁止用户缩放(user-scalable)。

viewport 全部属性如下:

  • width: viewport的宽度
  • height: viewport的高度
  • initial-scale: viewport的初始缩放比例
  • maximum-scale: viewport的最大缩放比例
  • minimum-scale: viewport的最小缩放比例
  • user-scalable: viewport的是否允许用户缩放

事实上,在JavaScript中,咱们测量viewport的大小也很容易。调用document.documentElement对象的clientWidthclientHeight属性就可以测量出viewportwidthheight

比如下面这个示例的代码,让你调整浏览器窗口大小时会更新viewportWidth(视窗宽度)和viewportHeight(视窗高度)两个变量的值:

let displayViewportSize = (e) => {
    let viewportWidth = document.documentElement.clientWidth
    let viewportHeight = document.documentElement.clientHeight
    console.log(`viewportWidth: ${viewportWidth},viewportHeight: ${viewportHeight}`)
}

window.addEventListener('resize', displayViewportSize, false)

运行上面的代码,随着你改变浏览器窗口大小时,将会输出更改后视窗widthheight的值,如下所示:

从《DOM树和遍历DOM》一节中,我们知道document.documentElement是HTML的根元素,即<html>元素。clientWidthclientHeight属性可以用来获取元素边框内区域的大小。也就是说,document.documentElement.clientWidthdocument.documentElement.clientHeight分别获取的是html元素边框内区域的大小。如果你未接触过这两个属性,建议你花点时间阅读一下《获取元素位置和尺寸》一文。

如前所述,viewport的值不包括水平或垂直滚动条。但有时候,视窗大小的计算有可能也会包含滚动条的大小。如果计算的viewport大小包括了滚动条大小的话,咱们可以使用window.innerWidthwindow.innerHeight来进行计算。

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/viewport-device-scroll-document-size.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部