所有现代浏览器都支持 4 个属性: innerWidth、innerHeight、outerWidth 和 outerHeight。
innerWidth和innerHeight:返回浏览器窗口中页面视口的大小
outerWidth 和 outerHeight :返回浏览器窗口自身的大小
可以明显看出,前缀inner就是浏览器内部视口大小(不包含浏览器边框和工具栏),outer就是浏览器外部大小(不管是在最外层 window 上使用,还是在窗格中使用)
不包含滚动条的页面视口
值得注意的是页面视口的显示document.documentElement.clientWidth 和 document.documentElement.clientHeight 也返回页面视口的宽度和高度,不同的是前者返回的页面视口包括滚动条的宽度(如果存在的话),后缀则不包含。
兼容性
document.compatMode
属性用来指示文档是否处于“标准模式”(也称为“严格模式”)或“混杂模式”(也称为“怪异模式”或“Quirks Mode”)。这个属性的值可以是 "CSS1Compat"
或 "BackCompat"
。
- 在标准模式下,
document.documentElement
通常指的是<html>
标签,它包含了整个文档的宽度和高度。 - 在混杂模式下,
document.body
可能不包括整个文档的宽度和高度,特别是当文档中存在滚动条时。
为了不同浏览器模式下都能正确获取页面的宽度和高度,可以选择使用document.compatMode
判断是否为标准模式(一般现代浏览器都处于CSS1Compat
),再使用document.documentElement.clientHeight。
实验
现在做一个小实现,内容是当页面窗口大小变化时候html页面实时显示,这里是使用的是Vue中的语法。
页面模板
<view class="content">
<text>{{ w }}:{{h}}</text> <!-- 使用 currentTime 来显示时间 -->
<button @click="startTimer">{{title}}</button>
</view>
js部分
这里使用setInterval每秒去获取窗口大小,使用方法也是老生常谈了【表达式,时间(毫秒)】
<script>
export default {
data() {
return {
title: "标题随窗口变化", // 提示信息
w:0,
h:0
};
},
methods: {
startTimer: function () {
// 设置定时器每秒更新 currentTime
this.intervalId = setInterval(() => {
//判断标准模式
if (document.compatMode == "BackCompat"){
this.w=document.documentElement.clientWidth;
this.h=document.documentElement.clientHeight;
}
else{
this.w= document.body.clientWidth;
this.h= document.body.clientHeight;
}
}, 1000);
},
clearTimer: function () {
// 清除定时器
clearInterval(this.intervalId);
}
},
onUnload() {
// 页面卸载时清除定时器
this.clearTimer();
}
}
</script>