<template>
  <div id="app">
    <div class="iframe_box">
      <iframe
        id="h5-game-iframe"
        class="iframe"
        frameborder="0"
        scrolling="no"
        allowtransparency="yes"
        style="overflow: hidden"
        :src="gameUrl"
        :width="iframeWidth"
        :height="iframeHeight"
      ></iframe>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  computed: {},
  data() {
    return {
      gameUrl: "https://game.jhfly.cn/sp/", // sp落地页
      iframeWidth: 0, // iframe宽
      iframeHeight: 0, // iframe高
      resizeTimer: null, // 页面重载延迟执行
    };
  },
  mounted() {
    // 根据屏幕宽和高获取iframe高度
    this.h5ScreenOrientation();

    // 监听页面重载
    this.onResize();
  },
  methods: {
    /**
     * 根据屏幕宽和高获取iframe高度
     */
    h5ScreenOrientation() {
      // 当前的宽
      const width = window.innerWidth || document.documentElement.clientWidth;
      // 当前的高
      const height =
        window.innerHeight || document.documentElement.clientHeight;
      this.iframeWidth = width;
      this.iframeHeight = height;
    },
    /**
     * 监听页面重载
     */
    onResize() {
      window.onresize = () => {
        // 页面resize
        clearTimeout(this.resizeTimer);
        this.resizeTimer = setTimeout(() => {
          this.h5ScreenOrientation();
        }, 1000);
      };
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 32 / @rem;

  .iframe_box {
    width: 100%;
    height: 100%;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  // 横屏最大高度
  // height: 260 / @rem;
  //   overflow-y: auto;
  #app {
    font-size: 16 / @rem;
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  #app {
    font-size: 16 / @rem;
  }
}
</style>