监听移动端h5页面横竖屏切换

用CSS判断

/* 竖屏 */
@media all and (orientation: portrait) {
	/* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
	/* 自定义样式 */
}

用JS判断

new Vue({
  el: "#app",
  data() {
    return {
      orientation: '', // 横竖屏标记``,
    }
  },
  created() {
  },
  mounted() {
    this.orient();
    window.addEventListener( 'orientationchange', this.orient);
  },
  methods: {
    orient() {
      if (window.orientation === 90 || window.orientation === -90) {
        //横屏
        this.orientation = 'landscape';
      }
      else if (window.orientation === 0 || window.orientation === 180) {
        //竖屏
        this.orientation = 'portrait';
      }
    },
  }
})