How to run some javascript code only on small screen/mobile devices

Question

I am building a vue web app which will be used across all devices. I have some code which I want to get executed only on small devices or mobile. Currently I have that code in a if condition with $(window).width(), like following:

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

Is there some better way or vue way of doing this?

Edit

For example in one of the component I have:

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
      })
    }
  }
}

in another component, I have:

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

You can refer http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser — Parth Ghiya, Jan 26 '17 at 06:43
Well small screen width and small device usually coincide, but not always so you need to decide whether you want the code to execute when a user has a small screen or when the user is using a mobile. — apokryfos, Jan 26 '17 at 06:53
@Saurabh as suggested, you should try to clump all small screen specific code together somehow. If not then you'll be stuck squeezing these conditions all over the place. This is why current conventional wisdom is to avoid writing different code per device and writing code that would work similarly on everything. — apokryfos, Jan 26 '17 at 07:01
See my answer here https://stackoverflow.com/a/50342804/6013170 — Janserik, Oct 03 '19 at 10:43

score 8 · Answer 1 · answered Jan 26 '17 at 06:45

8

you can use

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 Method.

answered Jan 26 '17 at 06:45

Parth Ghiya

6,929
2
30
37

1

you don't need an 'else' there, because of the first return – Hillcow Aug 05 '17 at 09:40
1

use test instead of match then you don't need the condition function detectMobile() { var ua = navigator.userAgent; return /Android/i.test(ua) || /webOS/i.test(ua) || /iPhone/i.test(ua) || /iPad/i.test(ua) || /iPod/i.test(ua) || /BlackBerry/i.test(ua) || /Windows Phone/i.test(ua) } – Can Rau Nov 07 '17 at 02:29

score 1 · Answer 2 · answered Mar 05 '18 at 13:47

1

The best way to achieve this is using the plugin called vue-mediaquery.

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

It worked for me.

I hope this helps!

answered Mar 05 '18 at 13:47

Jayesh Dhandha

1,983
28
50

score -1 · Answer 3 · edited Jan 26 '17 at 06:49

-1

You can check for condition and load JS as per necessity.

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

edited Jan 26 '17 at 06:49

Saurabh

71,488
40
181
244

answered Jan 26 '17 at 06:42

Hiren Jungi

854
8
20

But this is vue component specific code scattered in different vue components, not sure if this can be put in a single JS file, let me add this in the question. – Saurabh Jan 26 '17 at 06:45

How to run some javascript code only on small screen/mobile devices

3 Answers3