Question

我正在构建一个将在所有设备上使用的vue Web应用程序。我有一些代码，我想只在小型设备或移动设备上执行。目前，我将该代码置于$(window).width()的if条件中，如下所示：

if ($(window).width() <= 768) {
  //My mobile specific code
}

有没有更好的方法或vue方式这样做？

修改

例如，在我所拥有的一个组件中：

export default {
  data () {
    return {
      fade: false,
      showFilter: $(window).width() > 768
    }
  },
  components: { PrFilter, Pr },
  created () {
    if ($(window).width() <= 768) {
      bus.$on('pr-changed', () => {
        this.showFilter = false
        this.fade = false
      })
    }
  }
}

在另一个组件中，我有：

watch: {
  matchingPr: function (filteredPr) {
    if (filteredPr.length) {
      this.pr = filteredPr[0]
      if ($(window).width() <= 768) {
        bus.$emit('pr-changed')
      }
    }
  }
},

Answer 1

你可以使用

function detectmob() { 
 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)
 ){
    return true;
  }
 else {
    return false;
  }
}

navigator.userAgent方法。

Answer 2

实现此目标的最佳方法是使用名为 vue-mediaquery 的插件。

https://alligator.io/vuejs/vue-media-queries/

它对我有用。

我希望这有帮助！

Answer 3

您可以根据需要检查条件并加载JS。

<script>
if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
</script>

如何在小屏幕/移动设备上运行一些JavaScript代码

3 个答案: