<template>
  <div>
    <iframe
      class="page-view hack"
      :src="url"
      frameborder="0"
      :scrolling="scrolling"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: '',
      // 用于传值给iframe 通过 scrolling 和 style 来控制，但是可能出现在电脑端调试的时候无法滚动的情况
      scrolling: '',
    };
  },
 
  mounted() {
    this.changeScroll(); // 在mounted中调用
  },
  methods: {
    
    changeScroll() {
      if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { // 判断是苹果设备还是其他设备
        this.scrolling = 'no'; // 苹果设备设置为no
      } else {
        this.scrolling = 'yes';// 安卓设备设置为yes
      }
    }
  }
};
</script>

<style lang="less" scoped>
.page-view{
  position: absolute;
  // padding-top: 80/@px2rem;
  top: 80/@px2rem;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-overflow-scrolling: touch;
}

.hack {
  border: none;
  height: 100%;
  width: 1px; 
  min-width: 100%;
  *width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
</style>