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

它爲我工作。

我希望這有助於！