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

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>