{"id":128253,"date":"2022-09-20T09:59:21","date_gmt":"2022-09-20T09:59:21","guid":{"rendered":"https:\/\/phppot.com\/?p=19421"},"modified":"2022-09-20T09:59:21","modified_gmt":"2022-09-20T09:59:21","slug":"how-to-detect-mobile-device-using-javascript","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/09\/20\/how-to-detect-mobile-device-using-javascript\/","title":{"rendered":"How to Detect Mobile Device using JavaScript"},"content":{"rendered":"
by Vincy<\/a>. Last modified on September 20th, 2022.<\/div>\n

If you are looking for a client-side solution to detect a mobile device, your search stops here :-). There are properties to detect this on the client side by using JavaScript.<\/p>\n

Two methods of detecting if a current device is a mobile device are listed below.<\/p>\n

    \n
  1. By using JavaScript window.matchMedia() method.<\/li>\n
  2. By using navigator.userAgent property.<\/li>\n<\/ol>\n

    Both are using JavaScript basic methods to create the mobile device detector code.<\/p>\n

    1) By using JavaScript window.matchMedia() method<\/h2>\n

    This method is the best one compared to the one using JavaScript navigator.userAgent. Because the userAgent is a setting that can be configured by the end users. They can change it!<\/p>\n

    matchmedia.html<\/p>\n

    \n

    Quick example<\/h3>\n
    function isMobileDevice() { return window .matchMedia(\"only screen and (max-width: 760px)\").matches;\n}\nif (isMobileDevice()) { document.write(\"<b>Detected device is a mobile.<\/b>\");\n} else { document .write(\"<b>Detected device is not a mobile.<\/b>\");\n}\n<\/code><\/pre>\n<\/div>\n
    The matchMedia() JavaScript custom method is used to do this mobile device detection.<\/p>\n
    It accepts a media query string and returns an object. This object will contain the current device\u2019s media property and its relevancy.<\/p>\n
    Then, this object is used to find the match<\/a> between the current device\u2019s media property with the media query passed.<\/p>\n
    This program sends the media query containing a max-width of a mobile device that is expected to have.<\/p>\n
    If the current device\u2019s media screen properties are matched with this argument, then this JavaScript function returns a boolean true.<\/p>\n
    View Demo<\/a><\/p>\n
    This screenshot is taken from my computer that prints the result of the above quick example.<\/p>\n
    \"detect<\/p>\n
    Media match with CSS<\/h3>\n
    It can also be done by CSS instead of JavaScript. Follow the below steps to implement this using CSS.<\/p>\n