优化 之 网页端显示h5页面留白(留有空白区域)

直接上代码吧，我累了，不多讲解，大家都懂

HTML

<template>
  <div id="app" :class="{'fixed-app': fixedStatus}">
    <router-view/>
  </div>
</template>

---

JS

<script>
export default {
  data() {
    return {
      fixedStatus: false
    };
  },
  created() {
    this.resize();
    window.addEventListener('resize', this.resize, false);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize, false);
  },
  methods: {
    resize() {
      if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { // 移动端
        // 移动端操作
        this.fixedStatus = false;
      } else {
        // pc端操作
        // 固定app宽度
        this.fixedStatus = true;
      }
    }
  }
};
</script>

---

CSS

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-size: .14rem;
  &.fixed-app {
    max-width: 750px;
    min-width: 320px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Microsoft Yahei",sans-serif;
    overflow: hidden;
  }
}
</style>