页面强制横屏

416 阅读1分钟

在App.vue文件,mounted函数中调用该函数

handleResize () {
      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      const $wrapper = document.getElementById('app');
      let style = '';
      if (width >= height) {
        // 横屏
        style += 'width:' + width + 'px;';
        style += 'height:' + height + 'px;';
        style += '-webkit-transform: rotate(0); transform: rotate(0);';
        style +=
          '-webkit-transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
        style += 'transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
      } else {
        // 竖屏
        style += 'width:' + height + 'px;';
        style += 'height:' + width + 'px;';
        style += '-webkit-transform: rotate(90deg); transform: rotate(90deg);';
        style +=
          '-webkit-transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
        style += 'transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
      }
      $wrapper.style.cssText = style;
    }
```