Vue 實時獲取屏幕寬高

 

 

export default {
    name: 'page-index',
    data(){
        return{
            windowWidth: document.documentElement.clientWidth,  //實時屏幕寬度
            windowHeight: document.documentElement.clientHeight,   //實時屏幕高度
        }
    },    
    methods: {
    },
    // <!--在watch中監聽實時寬高-->
    watch: {
      windowHeight (val) {
        let that = this;
        console.log("實時屏幕高度：",val, that.windowHeight );
      },
      windowWidth (val) {
        let that = this;
        console.log("實時屏幕寬度：",val, that.windowHeight );
      }
    },

    mounted() {
        var that = this;
        // <!--把window.onresize事件掛在到mounted函數上-->
        window.onresize = () => {
            return (() => {
              window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
              that.windowHeight = window.fullHeight;  // 高
              that.windowWidth = window.fullWidth; // 寬
            })()
          };
    },
}

 

document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth