vue中监听页面旋转，echarts移动端全屏展示

因为是移动端，适配用的postcss-px2rem，所以当横屏的时候，样式会错乱

 mounted() {
    
    
    // 监听页面旋转
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.isPortrait, false);
 }
 methods: {
    
    
	 // 横竖屏
    isPortrait() {
    
    
      if (window.orientation === 180 || window.orientation === 0) {
    
    
        console.log('竖屏');
       
        return true;
      }
      if (window.orientation === 90 || window.orientation === -90) {
    
    
        console.log('横屏');
        // 不好使
        document.getElementsByTagName('html')[0].style.fontSize = '37.5px';
        // 不好使
        // this.$nextTick(() => {
    
    
        //   document.getElementsByTagName('html')[0].style.fontSize = '37.5px';
        // });
        return false;
      }
    },
}

最终就不再监听页面的旋转，而是监听页面尺寸的变化

mounted() {
    
    
// 页面尺寸的变化
window.addEventListener("resize", this.renderResize, false);
}
methods() {
    
    
  renderResize() {
    
    
      document.getElementsByTagName('html')[0].style.fontSize = '37.5px';
      this.myEcharts.resize();  // 在这里是为了完成表的横屏展示哈
    },
}

思考：当时还在想页面旋转这个api有没有回调函数。经过这次，可以知道，页面旋转在前，然后尺寸发生变化，可以在尺寸变化时写一些方法，也就相当于是在旋转的回调里写了

 // 根据不同的屏幕宽度换算字体大小  如果后期返回echarts图标字体不会变化
    transformFontSize(fontsize) {
    
    
      const width = window.screen.width;
      const ratio = width / 1920;
      return parseInt(fontsize * ratio);// eslint-disable-line 
    },

这波echarts的全屏展示，因为我是内嵌在app里的，所以呢，我要全屏展示的额时候会给app通信，app去调机器的api（这个是我想的逻辑，具体app怎么操作的我不清楚哈），当时和app确定过，如果用户锁定竖屏状态他能否调成功，app开发说是可以的。web这变就很简单了，就是做个图标的重绘就可以的

app和web通信用的是下面的工具库

import {
    
     webViewContent } from 'hybrid-webframework';

export default {
    
    
    listen: (message, callback) => {
    
    
        return webViewContent.listenMessage(message, callback);
    },
    send: (message, prama, listener) => {
    
    
        return webViewContent.sendMessage(message, prama, listener);
    }
};