Detect mobile in JavaScript – Vue.js example

Detect mobile in JavaScript with `mobile-device-detect`.

Detect mobile in JavaScript / Vue.js / es6

Sometimes we may need to `know` at JS code level, whether our application is running on mobile, tablet, or maybe on desktop browser? There is a simple way to handle that. Meet `mobile-device-detect` – a great solution to detect mobile device and its type, with helpers for handling mobile devices in JavaScript.

How to detect mobile in JavaScript
How to detect mobile in JavaScript

Setup

npm install mobile-device-detect --save

or

yarn add mobile-device-detect

Usage

import { isMobile } from 'mobile-device-detect';
export default {
  name: 'HelloDevices',
  data () {
    return {
      msg: isMobile ? 'Welcome to our Mobile App!' : 'Hello on Desktop!'
    }
  }
}

Show result in a template:

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

For React JS there is a dedicated library: `react-device-detect`.

There is a rich set of selectors we can use. See below:

– isMobile

– isMobileOnly

– isTablet

– isBrowser

– isSmartTV

– isWearable

– isConsole

– isAndroid

– isWinPhone

– isIOS

– isChrome

– isFirefox

– isSafari

– isOpera

– isIE

– isEdge

– isYandex

– isChromium

– isMobileSafari

– osVersion

– osName

– fullBrowserVersion

– browserVersion

– browserName

– mobileVendor

– mobileModel

– engineName

– engineVersion

– getUA

– deviceDetect

License: MIT

Homepage / GitHub

https://github.com/duskload/mobile-device-detect

See also

JavaScript algorithms implemented

Mobile friendly datepicker with React JS

JS video and photo gallery – blueimp

Enjoy!