How to Detect Mobile Devices using JavaScript

Many operations works on desktop, tablet, and mobile devices. We can detect the operation working on the mobile device. We can detect mobile devices using various methods, including the "window.navigator.userAgent" and "window.orientation" methods.

Method 1: Making use of the guide.userAgent Property

We will use the window navigator object, which has all the information about a browser, to identify a mobile device using JavaScript. The userAgent field, which is used to return the user-agent header supplied to the server by the browser, will be the Property we utilize to identify a mobile device.

The browser name, version, and platform are all the details about a mobile device. You will obtain them by using this function, and they are the values we get from this Property.

Syntax:

The JavaScript syntax for detecting a mobile device is as follows:

Step to the Procedures

The following steps outline how to use JavaScript to identify a mobile device:

1. Make a button and connect it to the function known as function.
2. We will now build one "if loop" in the function.
3. Using the navigator, we will write some criteria inside the "if loop" for any mobile device that can be detected using the userAgent parameter.
4. We have written conditions that are compatible with every kind of mobile device, including Android, webOS, iPad, iPhone, iPod, BlackBerry, and Windows Phone.
5. If a mobile device is identified, the result will be true once all conditions have been verified.
6. If no mobile device is identified, the else loop returns false in the 'a' variable.
7. Print the value of an in the response variable, which is connected to the paragraph tag with an id result, at the end to display the value on the screen as true or false.

Example

The following example shows whether the device is mobile or not. The device shows the Boolean values for the detection of mobile devices.

Output

The output shows the Boolean values for the detection of mobile devices.

Explanation

We must execute your code using the Chrome developer tool and select the mobile phones option in order to get the output from the above code to be "true." You may use the code above to detect the presence of mobile phones by entering the developer tool's mobile zone and selecting any phone from the list of available devices to use as an emulator.

When the code is executed, a window labeled "Check" will open. Click this button to see if the mobile phone can be detected. The outcome will be true if the code is executed on a mobile device and false otherwise.

Method 2: use the window.orientation method

The user-agent strings in this method can be easily spoofed. Therefore, it's not the greatest way to use JavaScript to identify a mobile device. Thus, we can also use JavaScript's window.orientation method to identify a mobile device by looking at the device's viewport's orientation.

It gives us values in degrees, such as -90, 0, 90, and 180. Each of these variables represents a distinct viewpoint. The device is considered mobile if the viewport value is larger than 0; otherwise, it is not a mobile phone.

NOTE: This functionality is no longer encouraged and is deprecated.

Steps of the procedures

Here are the steps to use JavaScript to detect a mobile device:

1. Make a button and associate it with the "myfunction" function.
2. We will now define the function inside the script tag.
3. The window orientation method will be used to determine whether the orientation value is larger than -1 by creating a variable called an answer.
4. The alert method, which prints "It is a mobile phone" if the response variable's value is true, is called in the following line.
5. The value will display "It is not a mobile phone" otherwise.

Example

The following example shows whether the device being used is mobile or not. The device shows data information and an alert box for detecting a mobile device.

Output

The output shows the values for the detection of mobile devices.

Method 3: Detect website is open on mobile device

Using Javascript, we can detect whether a website is open on a mobile device or not. We can use the "navigator.userAgent" method to detect whether a website works on mobile devices. We can use this method to detect mobile devices, tablets and desktops.

Syntax

The following JavaScript syntax is used to detect a mobile device for a website.

Examples

The following examples show whether the device being used is mobile or not. The device shows the Boolean values for detecting a mobile device.

Example 1:

The following example shows whether the website works on a mobile device. The device shows the Boolean values for detecting mobile devices.

Output

The output shows the Boolean values for the detection of mobile devices.

Example 2:

The following example shows whether the website is working on the mobile device or not.

Output

The output shows the Boolean values for the detection of mobile devices.

Method 4: use the "navigator.vendor" method

The navigator.vendor function detects possible mobile devices. We can see whether the device is mobile or not.

Example:

The following example shows whether the website is working on the mobile device or not.

Output

The output shows the Boolean values for the detection of mobile devices.