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

Question

我正在构建一个将用于所有设备的vue web应用程序。我有一些代码只能在小设备或移动设备上执行。目前，我有一个条件，如果该代码与$(window).width()，像以下：

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

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

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

Answer 2

可以使用

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 3

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

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

它为我工作。

我希望这有助于！