Vue動態取得網頁高寬度

目標

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

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

取得網頁高寬度

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

window.innerWidthwindow.innerHeight

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

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

document.documentElement.clientWidthdocument.documentElement.clientHeight

document.body.clientHeightdocument.body.clientWidth

在Vue.Js裡面監聽

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

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学习笔记:视口宽高、位置与滚动高度

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