duskload / mobile-device-detect Goto Github PK

View Code? Open in Web Editor NEW

190.0 4.0 15.0 448 KB

Detect mobile device and its type.

License: MIT License

JavaScript 100.00%

mobile detect useragent javascript angualrjs vuejs reactjs device

mobile-device-detect's Introduction

mobile-device-detect

Helpers for handling mobile devices in javascript.

Installation

To install, you can use npm or yarn:

npm install mobile-device-detect --save

or

yarn add mobile-device-detect

Usage

Import any helper to your component, for example, in Vue.js:

<script>
import { isMobile } from 'mobile-device-detect';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: isMobile ? 'Welcome to Your Vue.js mobile App!' : 'Welcome to Your Vue.js App'
    }
  }
}
</script>

pass it to template:

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

For react example, you can look into separated package react-device-detect

Selectors

Property	Return type	Description
isMobile	bool	returns true if device type is `mobile` or `tablet`
isMobileOnly	bool	returns true if device type is `mobile`
isTablet	bool	returns true if device type is `tablet`
isBrowser	bool	returns true if device type is `browser`
isSmartTV	bool	returns true if device type is `smarttv`
isWearable	bool	returns true if device type is `wearable`
isConsole	bool	returns true if device type is `console`
isAndroid	bool	returns true if os type is `Android`
isWinPhone	bool	returns true if os type is `Windows Phone`
isIOS	bool	returns true if os type is `iOS`
isChrome	bool	returns true if browser is `Chrome`
isFirefox	bool	returns true if browser is `Firefox`
isSafari	bool	returns true if browser is `Safari`
isOpera	bool	returns true if browser is `Opera`
isIE	bool	returns true if browser is `Internet Explorer`
isEdge	bool	returns true if browser is `Edge` or `Edge Chromium`
isYandex	bool	returns true if browser is `Yandex`
isChromium	bool	returns true if browser is `Chromium`
isMobileSafari	bool	returns true if browser is `Mobile Safari`
osVersion	string	returns os version (e.g 7 for `Windows` or 6 for `Android`)
osName	string	returns os name (e.g `Windows`, `Android`)
fullBrowserVersion	string	returns full browser version (e.g 65.0.3325.181 for `Chrome`)
browserVersion	string	returns browser `major` version (e.g 65 in `Chrome` or 9 in `IE`)
browserName	string	returns browser name
mobileVendor	string	returns mobile device vendor (e.g `LG`, `iPhone` etc)
mobileModel	string	returns mobile device model (e.g `Nexus 5`)
engineName	string	returns browser engine `name` (e.g `Gecko` for FF or `WebKit` for Chrome)
engineVersion	string	returns engine version
getUA	string	returns user agent
deviceType	string	returns device type (e.g `mobile` or `tablet`)
isIOS13	boolean	returns true/false if device is running on iOS13
isIPhone13	boolean	returns true/false if device is iPhone and running on iOS13
isIPad13	boolean	returns true/false if device is iPad and running on iOS13
isIPod13	boolean	returns true/false if device is iPod and running on iOS13
isElectron	boolean	returns true/false if running on `Electron`
isEdgeChromium	boolean	returns true/false if browser is `Edge Chromium`
isLegacyEdge	boolean	returns true if browser is `Edge`
isWindows	boolean	returns true/false if os is `Windows`
isMacOs	boolean	returns true/false if os is `Mac OS`
deviceDetect	function	return data object which includes all data about device (e.g version, engine, os etc.)

License

MIT

mobile-device-detect's People

Contributors

Stargazers

Watchers

Forkers

dabin-mx mdogancay mridulsagar rampapampapampapam kossmos nicastelo rleivac bitardev mansour-j joanneccwang oudafei liupingping freyalise hramos16bb toan-trieu-ts

mobile-device-detect's Issues

Tablet in landscape

isTablet is false if tablet is in landscape

Support for Cars?

Hi,
thanks for this helpful small library 👍
Would it be possible to detect cars such as Tesla Model 3 ? I think cars could form their own deviceType in the future 😉

I fount this UserAgent for Tesla Cars

Mozilla/5.0 (X11; GNU/Linux) AppleWebKit/537.36 (KHTML, like Gecko)
Chromium/79.0.3945.130 Chrome/79.0.3945.130 Safari/537.36
Tesla/2020.16.2.1-e99c70fff409

Any intention on supporting React Native?

I could work on it. Would it be welcome here?

Doesn't recognize Edge Chromium

Value of "isEdge" is false when using new Edge Chromium.
This is my navigation.userAgent:
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 Edg/81.0.416.77"

I'm using Edge Chromium version 81.0.416.77.

If Navigation is available without User Agent, library causes crash

It doesn't work on Android Chrome 81.0.4044.138

<template>
<br> {{ isMobile }} {{ getUA }} <br/>
</template>

<script>
import { getUA, isMobile } from 'mobile-device-detect'
export default {
  name: 'App',
  data () {
    return {
      getUA: getUA,
      isMobile: isMobile
    }
  }
  ...
</script>

Output:

false Mozilla/5.0 (Linux; Android 5.0.1; B1-770) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

If Navigation is available without User Agent, library causes crash

ERROR TypeError: undefined is not an object (evaluating 'e.userAgent.toLowerCase')

PR fix here: #74

I have an open PR to patch this, though I am aware that it's odd for a nav instance to be available without an userAgent, one of the downstream consumers of my app was running into this problem.

Return values for fullBrowserVersion and browserVersion are swapped around.

Currently, fullBrowserVersion is returning the major version, while browserVersion is returning the full version. This is due to the implementations of getBrowserFullVersion and getBrowserVersion as shown below:

Detect if PWA is added to home screen

Hi team,

First, congrats for this tool... is very useful!!

Has any way to detect if PWA has been installed (added to home screen)? I am using this package to detect iOS and presents to user the steps to add to home screen (like Android). But, after the user add to home screen, my code still present this option.

I suggest a attribute like "inHomeScreen" to differ access in browser from access by icon in home screen.

Thanks!

Egde browser does not detect on Windows 7

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36 Edg/81.0.416.53
Browser name detected as Chrome. Also "isEdge" returned as "False".

There are some improvements have been applied to the UAParser library specially around Microsoft edge after v0.7.18

However the mobile-device-detect library still uses UAParser v0.7.17. https://github.com/faisalman/ua-parser-js/tags

I applied the UAParser v0.7.22 changes locally, then my Edge issues were resolved.

mobile-device-detect requires to update to the latest ua-parser version.

fullBrowserVersion is undefined in some browsers

In some browsers (in very few) fullBrowserVersion returns undefined.
You can reproduce this behaviour using this browser on IOS.

This case may be a bug or a special case which requires the adjustment of lib's typings