How to call two different JavaScript functions, one for desktop version and one for mobile version on a same onclick event attribute in html?

I have a responsive HTML page for desktop and mobile version. And I have two functions, one is for the desktop version and one is for the mobile version. Both functions are on the same onclick event attribute in a div. I want one function to be executed at a time according to the width of the device i.e., if the width of the screen is greater than 425px then the function for the desktop should be executed and if it is 425px or less then the function foe the mobile version should be executed. Found different answers on StackOverflow like window.matchMedia() etc But it is not working for me.

Answer

Try window.innerWidth <= 425 for detecting mobile.

Some fun things you can do with this and global getters:

Object.defineProperty(window, 'mobile', {
  get() {
    return window.innerWidth <= 425;
  }
})

function SomeFunction() {
  if (mobile) {
    alert('im on mobile!')
  } else {
    alert('on a tablet, laptop, or desktop!')
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *