Question

我的vue应用需要确定是桌面设备还是移动设备正在查看它。

没问题。

但是，当应用程序在加载一秒钟后看起来不成比例时，就会出现“打cup”现象，这是不可接受的。

我的Vue应用程序如何立即更改body标签，以便页面顺利加载？

谢谢

更新：

感谢A.Broderick的帮助-以下是我的解决方案

Answer 1

尝试将应用的初始样式设置为display: none;，然后根据条件将其加载到桌面还是移动设备上做出反应？这样，必须首先从初始空白页中选择一个。但是，如果加载需要花费几秒钟的时间，那么看来代码的结构可能存在一些问题，请注意将其发布吗？

Answer 2

您是否正在使用Vue Router？如果是这样，您可以通过路由器功能来计算它是PC还是移动设备。您最有可能希望将计算结果放在路由器的“ beforeEach（）”函数中，或者如果只是一两个页面，则可以将其放在各个页面的“ beforeRouteEnter（）”函数中。

Answer 3

感谢A.Broderick的帮助

这是对我有用的方法：

HTML：

<html>
  ....
<style>
  .noDisplay {
    display: none;
  }
</style>
  </head>
  <body class="noDisplay">
   ....
 </body>

App.vue：

  <script>
  // 3rd party
  var MobileDetect = require('mobile-detect')

  // Shell
  import DesktopShell from './components/layout/desktop/d_shell.vue'
  import MobileShell from './components/layout/mobile/m_shell.vue'

  export default {
     name: 'app',
     data() {
     return {
     windowWidth: 0,
     windowHeight: 0,
     goMobile: this.IsMobile()
     }
},
components: {
  appDesktopShell: DesktopShell,
  appMobileShell: MobileShell
},
methods: {
  IsMobile: function () {
    if (navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      || navigator.userAgent.match(/iPad/i)
      || navigator.userAgent.match(/iPod/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i)
    ) {
      this.goMobile = true;
      document.body.className += ' ' + 'is-mobile';
      document.querySelector('body').classList.remove('noDisplay');
      return true;
    }
    else {
      this.goMobile = false;
      document.querySelector('body').classList.remove('noDisplay');
      return false;
    }
  },
},
mounted() {
  this.$nextTick(() => {
    window.addEventListener('load', () => {
      this.windowWidth = window.outerWidth
      this.windowHeight = window.outerHeight
    });
    window.addEventListener('resize', () => {
      this.windowWidth = window.outerWidth
      this.windowHeight = window.outerHeight
    });
  })
},

}

在页面加载之前将内容添加到正文中

3 个答案: