Javascript mobile device name

How to detect a mobile device with JavaScript?

In this tutorial, we are going to learn how can we detect a mobile device over which we are working using JavaScript.

Approach 1: Using the navigator.userAgent Property

To detect a mobile device with JavaScript we are going to use the window navigator object which contains all the information regarding a browser. The property which we will use to detect a mobile device will be the userAgent property which is used to return the user-agent header sent to the server by the browser. The value we receive from this property is the browser name, version, and platform i.e., all the information regarding a mobile device you will get using this function.

Syntax

Syntax to detect a mobile device with JavaScript is given as −

window.navigator.userAgent ; or navigator.userAgent ;

Steps

Steps to detect a mobile device using JavaScript are given below −

• Create a button and link it with a function named as myfunction.
• Now in the function we will create one if loop.
• Inside the if loop we will write some conditions using navigator.userAgent property to detect any mobile device.
• The conditions we write will find match for each type of mobile devices such as android, webOS, iPad, iPhone, iPod, BlackBerry, and windows Phone.
• After checking all the conditions, it will return true if any mobile device found.
• If any mobile device is not found than we get false in the “a” variable using else loop.
• At last print the value of a in the answer variable which is linked with the paragraph tag with id result to print the value either true or false on the screen

Example

We can use the below HTML code to detect mobile device with JavaScript −

    Check    

Note − To get the output from the above code as ‘true’ you need to run your code using the chrome developer tool by choosing the option of mobile phones. When you enter the mobile zone of the developer tool there you can choose any mobile phone to work as an emulator from the list of mobile devices present there to detect the presence of mobile phones using the above code.

On running the code, a button will appear on the window named Check by clicking you can detect the mobile phone. If the code is running on any mobile device, then the output will be true otherwise it will be false.

Approach 2

But this method of user-agent is not the best method to detect a mobile device with JavaScript because the user-agent strings can be spoofed very easily. So, we can also use the window.orientation method to detect a mobile device using JavaScript, this method checks for the orientation of the viewport of the device. It provides us certain values in degrees like -90, 0,90,180 all these values signify different viewports. If the value of the viewport is greater than 0 it means that the device is a mobile otherwise it’s not a mobile phone.

Note − This feature is deprecated and no longer recommended

Steps to detect a mobile device using JavaScript are given below −

• Create a button and link it with a function named ‘myfunction’.
• Now inside the script tag, we will define the function.
• Create a variable named as answer and inside it we will use the window.orientation method to check if the orientation value is greater than -1 or not.
• In the next line, we will call the alert method which will print the value as “It is a mobile phone” if the value of the answer variable is true.
• Otherwise, the value will be shown as “It is not a mobile phone”.

Example

We can use the below HTML code to detect mobile device with JavaScript −

   Check    

Note − To check the output of this code we need to use the chrome developer tool as used in the above code.

If the code runs on an emulator mobile then we get the alert as “It is a mobile phone” else, we will get the output as “It is not a mobile phone”.

Источник

Getting (mobile) device name from javascript

You can’t do this through javascript for a web app running in a native browser — javascript generally doesn’t have access to this personal identifying data.

One possible way is to use a framework like PhoneGap which may have an API to access the device name. But then, you can only deploy your web site via an app store, so this could be very limiting based on your use case.

Solution 2

Your best bet is to use the user agent:

const ua = navigator.userAgent const device = < iPad: /iPad/.test(ua), iPhone: /iPhone/.test(ua), Android4: /Android 4/.test(ua) >

The object will allow you to write nice conditional logic such as if(device.iPad) < /* do stuff */ >

Solution 3

I’m working with mobile device with embedded scanner. To be able to use some the JavaScript library of different devices and to avoid conflict with those libraries of different manufacturer (Zebra, Honeywell, Datalogic, iOs ect. ) I need to come up with a way to identify each devices so I can load the proper library and this is what I came up with. Enjoy

getDeviceName: function () < var deviceName = ''; var isMobile = < Android: function() < return navigator.userAgent.match(/Android/i); >, Datalogic: function() < return navigator.userAgent.match(/DL-AXIS/i); >, Bluebird: function() < return navigator.userAgent.match(/EF500/i); >, Honeywell: function() < return navigator.userAgent.match(/CT50/i); >, Zebra: function() < return navigator.userAgent.match(/TC70|TC55/i); >, BlackBerry: function() < return navigator.userAgent.match(/BlackBerry/i); >, iOS: function() < return navigator.userAgent.match(/iPhone|iPad|iPod/i); >, Windows: function() < return navigator.userAgent.match(/IEMobile/i); >, any: function() < return (isMobile.Datalogic() || isMobile.Bluebird() || isMobile.Honeywell() || isMobile.Zebra() || isMobile.BlackBerry() || isMobile.Android() || isMobile.iOS() || isMobile.Windows()); >>; if (isMobile.Datalogic()) deviceName = 'Datalogic'; else if (isMobile.Bluebird()) deviceName = 'Bluebird'; else if (isMobile.Honeywell()) deviceName = 'Honeywell'; else if (isMobile.Zebra()) deviceName = 'Zebra'; else if (isMobile.BlackBerry()) deviceName = 'BlackBerry'; else if (isMobile.iOS()) deviceName = 'iOS'; else if ((deviceName == '') && (isMobile.Android())) deviceName = 'Android'; else if ((deviceName == '') && (isMobile.Windows())) deviceName = 'Windows'; if (deviceName != '') < consoleLog('Devices information deviceName = ' + deviceName); consoleLog('Devices information any = ' + isMobile.any()); consoleLog('navigator.userAgent = ' + navigator.userAgent); >return deviceName; >, 

and this is an example of how it can be used:

initializeHandheldScanners: function () < if (DeviceCtrl.getDeviceName() == 'Zebra') DeviceCtrl.initializeSymbolScanner(); if (DeviceCtrl.getDeviceName() == 'Honeywell') DeviceCtrl.initializeHoneywellScanner(); if (DeviceCtrl.getDeviceName() == 'Datalogic') DeviceCtrl.initializeDatalogicScanner(); >, 

You can say thanks to Cory LaViska. I did this based on his work. Here is the link if you want to know more

Solution 4

const getUA = () => < let device = "Unknown"; const ua = < "Generic Linux": /Linux/i, "Android": /Android/i, "BlackBerry": /BlackBerry/i, "Bluebird": /EF500/i, "Chrome OS": /CrOS/i, "Datalogic": /DL-AXIS/i, "Honeywell": /CT50/i, "iPad": /iPad/i, "iPhone": /iPhone/i, "iPod": /iPod/i, "macOS": /Macintosh/i, "Windows": /IEMobile|Windows/i, "Zebra": /TC70|TC55/i, >Object.keys(ua).map(v => navigator.userAgent.match(ua[v]) && (device = v)); return device; > console.log(getUA()); 

Источник

How To Detect Mobile Device, OS using JavaScript

Hello Devs, In this blog, we are going to learn that how you can detect mobile device or browser or OS using JavaScript and you can redirect the user to the mobile application or to the web application automatically.

Table of content

So without wasting any time, lets get into the tutorial.

1.What is navigator object in JavaScript

To get the bowser details or device details, JavaScript stores these information in the navigator property of window object.
navigator object contains lots of information about the browser, some of the most used/ important information we will see later in this tutorial.

Lets first see what navigator object is.
if you directly want to see how to get the detect mobile and desktop then you can skip this part can click here

navigator object contains information about the browser.
(NOTE: Not all but all major browser support this object)

2.Some of the most important properties are,

1. Clipboard — used to copy something to clipboard and paste it any where (Ex. while making Click to copy)
2. connection
3. language — shows the language of browser.
4. geolocation — Returns a Geolocation object that can be used to locate the user’s position
5. onLine — check whether the browser is online
6. platform — machine type where browser is installed.
7. cookieEnabled — it returns a Boolean value that indicates whether cookies are enabled or not.
8. serviceWorker — mainly used to checks if the browser supports service workers
9. vibrate(time) — make device vibrate if it support that
10. userAgent — will see below
11. userAgentData — will see below

I think this much information about the navigator object is enough to understand what is navigator object and what all information it contains

3.How to detect mobile device or browser or OS.

To get these information we will use the property userAgent , userAgentData of navigator object.

navigator.userAgent
userAgent will give you the information of lot of things like device name, browser name, OS version but the information returned by browser is not much understandable.
So, we can understand these returned information from the hack.

to get OS version and name you can follow the below hack,

if (window.navigator.userAgent.indexOf("Windows NT 10.0")!= -1) console.log("OS is Windows 10");> if (window.navigator.userAgent.indexOf("Windows NT 6.3") != -1) console.log("OS is Windows 8.1");> if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) console.log("OS is Windows 8");> if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) console.log("OS is Windows 7");> if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) console.log("OS is Windows Vista");> if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) console.log("OS is Windows XP");> if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) console.log("OS is Windows 2000");> if (window.navigator.userAgent.indexOf("Mac") != -1) console.log("OS is Mac/iOS");> if (window.navigator.userAgent.indexOf("X11") != -1) console.log("OS is UNIX");> if (window.navigator.userAgent.indexOf("Linux")!= -1) console.log("OS is Linux");> 

to check mobile device info you can follow below hack,

 function detectMobile()  const toMatch = [ /Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i ]; return toMatch.some((toMatchItem) =>  return navigator.userAgent.match(toMatchItem); >); > 

userAgent is much more complex to get these details.
So we have one more property i.e.
navigator.userAgentData
This gives the information about browser and mobile detection in 1 line.

navigator.userAgentData.mobile; //returns true or false, depending on the condition 

NOTE: Both of these 2 ways are not recommended to be use in the production.

So lets now see the best way to do so,

4.Better way is,

using matchMedia
it gives you more flexibility to decide that after what screen size you want to deal it as mobile or desktop and lot of other info,
please check official doc from MDN, MDN — Media Query
MDN- Media Query Features
About Pointer

function DetectDevice()  let isMobile = window.matchMedia || window.msMatchMedia; if(isMobile)  let match_mobile = isMobile("(pointer:coarse)"); return match_mobile.matches; > return false; > DetectDevice() //return true if mobile, and return false if desktop 

matchMedia also gives you the right to let you choose that after what screen-size you want to treat the device as Mobile(same as CSS Media Query) and its much more flexible than navigator object.

if (window.matchMedia("only screen and (max-width: 760px)"))  //do something you want to for the screen size less than 760 > 

we can also use window and screen object achieve this, but these are the older way and much complicated in bigger applications.

if(window.innerWidth > 768)//do something> if(screen.width > 768)//do something> 

Thank you for reading this far. This is a brief introduction on How to Detect Mobile Screen & OS using JavaScript .
If you find this article useful, like and share this article. Someone could find it useful too.

If you find anything technically inaccurate please feel free to comment below.

Источник