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);
    }
};

最后

以上就是壮观蜗牛为你收集整理的vue中监听页面旋转，echarts移动端全屏展示的全部内容，希望文章能够帮你解决vue中监听页面旋转，echarts移动端全屏展示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。