vue强制横屏

<template>
  <div id="gyroContain">111</div>
</template>

<style>
@media screen and (orientation: portrait) {
  html {
    width: 100vmin;
    height: 100vmax;
  }
  body {
    width: 100vmin;
    height: 100vmax;
  }
  #gyroContain {
    background-image: url("../assets/backgif_6.gif");
    background-size: cover;

    width: 100vmax;
    height: 100vmin;
    transform-origin: top left;
    transform: rotate(90deg) translate(0, -100vmin);
  }
}
@media screen and (orientation: landscape) {
  html {
    width: 100vmax;
    height: 100vmin;
  }
  body {
    width: 100vmax;
    height: 100vmin;
  }
  #gyroContain {
    width: 100vmax;
    height: 100vmin;
  }
}
</style>

<script>
export default {
  mounted() {},
};
</script>