js横竖屏切换，js(vue vuex)开启全面屏虚拟按键处空白处理

1.js横竖屏切换

renderResize: function () {
	// 判断横竖屏
	let width = document.documentElement.clientWidth
	let height = document.documentElement.clientHeight
	if(width > height||width < height) {//条件一横屏，条件二竖屏
		// alert('横屏');
		location. reload();
	}
	
}

2.js(vue vuex)开启全面屏虚拟按键处空白处理

问题展示：

安卓手机使用小米手机将显示里的全面屏模式开启，以有虚拟按键（即不是全面屏）切换到全面屏会把原有虚拟按键的位置空出来一部分，所以要监听是否开启全面屏，开启之后需要刷新或视口高度重新计算。
这里使用的vue
vue有一个方法：Vue window.onresize监听窗口变化
1.在store.js里定义:
screenHeight——用于存放全局的视口高度
changeScreenHeight ——用于动态改变视口的高度

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
		screenHeight: document.documentElement.clientHeight,
	},
	mutations: {
		changeScreenHeight (state, val) {
		    state.screenHeight = val;
		}
	},
	actions:{
		
	}
})

前台vue文件中引入vue，.vue里挂载window.onresize，也可以使用（例：watch里）

<template>
  <div class="app">

    <div class="app-body">
      <router-view></router-view>
    </div>

    <router-view name="tabbar" :style="{ display: tabbarDisplay}"></router-view>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'App',

  data () {
    return {
      
    }
  },

  watch: {
    /**
    * 侦听页面可视高度的变化,将底部tabbar display:block
    */
    '$store.state.screenHeight' () {
      // 使用视口高度变量
        location. reload();
    }
  },

  methods: {
    ...mapMutations(['changeScreenHeight'])
  },

  mounted () {
    window.onresize = () => {
      this.changeScreenHeight(document.documentElement.clientHeight)
    }
  }
}
</script>

注意：

在项目中 window.onresize只能挂载一次，在多个页面中同时挂载 window.onresize时，只有其中一个 window.onresize会起作用。
mutations是唯一更改store的地方，更改store里的screenHeight，必须在mutations里定义函数，在需要更改store的地方调用执行。
引入store以后，直接就可以使用，App.vue页面挂载的onresize监听是全局的。