Vue動態取得網頁高寬度

目標

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

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

取得網頁高寬度

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

window.innerWidth、window.innerHeight

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

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

document.documentElement.clientWidth、document.documentElement.clientHeight

或document.body.clientHeight、document.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学习笔记：视口宽高、位置与滚动高度

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