如何在小屏幕/移動設備上運行一些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>