Vue動態取得網頁高寬度

目標

當使用者放大、縮小瀏覽器時,取得當下的畫面大小。設定部份CSS製作RWD網頁

或是需要根據畫面大小以調整部份DIV的CSS效果

取得網頁高寬度

要取得網頁當下的高寬度,最直接想到的就是

window.innerWidthwindow.innerHeight

不過要注意的是,IE8以下不支援這種寫法

若要支援到IE8,則需要使用

document.documentElement.clientWidthdocument.documentElement.clientHeight

document.body.clientHeightdocument.body.clientWidth

在Vue.Js裡面監聽

知道取得方法後,只需要在Vue mounted後監聽,就可以即時取得當下的高寬度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
data(){
return {
fullWidth: 0,
fullHeight: 0
}
},
mounted() {
const vm = this;
vm.fullWidth = window.innerWidth;
vm.fullHeight = window.innerHeight;
window.onresize = () => {
vm.fullWidth = window.innerWidth;
vm.fullHeight = window.innerHeight;
};
},

注意!
1. window.onresize只能在項目中其中一處觸發,若多個地方監聽的話,會只有其中一個地方生效
2. 若是要加入到CSS效果的話,要記得在後方加入px,才算是正常設值

參考資料

若是對瀏覽器提供的各種高寬、offset、scroll想要更深入了解,可以參考這篇文章:JavaScript学习笔记:视口宽高、位置与滚动高度

個人覺得寫的還滿詳細的!