How to determine whether it is a mobile login with javascript

With the popularity of smart phones, more and more users choose to use mobile phones to log in to websites. In website development, we sometimes need to determine whether the user logs in through a mobile phone or a computer in order to make corresponding optimization and adjustments. This article will introduce how to use JavaScript to determine whether the user is logging in through a mobile phone.

1. Detection through user-agent

We can obtain the browser and operating system information from the user-agent, and determine whether the user is a user by determining whether it contains specific keywords of the mobile browser. Log in via mobile phone. The following is common mobile browser user-agent information:

• user-agent information for mobile devices

  Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1
  Mozilla/5.0 (iPad; CPU OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/86.0.4240.93 Mobile/15E148 Safari/604.1

  Copy after login

• user-agent for Android devices Information

  Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Mobile Safari/537.36

  Copy after login

We can use regular expressions to match the user-agent to determine whether it contains the keywords of the mobile browser. The following is the JavaScript code to determine whether it is a mobile phone login:

function isMobile() {
    const ua = navigator.userAgent;
    const isIOS = /iPhone|iPad|iPod/i.test(ua);
    const isAndroid = /Android/i.test(ua);
    const isMobile = isIOS || isAndroid;
    return isMobile;
}

In the above code, we first obtain the user-agent information of the browser, and then use regular expressions to determine whether it contains iPhone, iPad, iPod and Android Wait for the keyword of the mobile browser, and finally return a Boolean value indicating whether the user logged in through a mobile phone.

2. Detection through screen resolution

Another way to determine whether the user logs in through a mobile phone is to detect through screen resolution. Since the screen resolutions of mobile phones and computers are very different, we can determine whether the user logs in through a mobile phone or a computer based on the screen resolution.

Usually, the width of mobile phone screens does not exceed 768 pixels, while the width of computer screens is usually greater than 1024 pixels. Therefore, we can determine whether the current screen width is less than 768 pixels to determine whether the user is logging in through a mobile phone.

The following is the JavaScript code to determine whether it is a mobile login:

function isMobile() {
    const width = window.innerWidth;
    const isMobile = width <= 768;
    return isMobile;
}

In the above code, we obtain the width of the current window and determine whether it is less than or equal to 768 pixels to determine whether the user is Log in via mobile phone.

3. Comprehensive use

The above two methods each have their own advantages and disadvantages, and you need to choose according to the actual situation when using them. Usually, we can use two methods in combination to improve the accuracy of judgment.

The following is the JavaScript code that uses the above two methods:

function isMobile() {
    const ua = navigator.userAgent;
    const width = window.innerWidth;
    const isIOS = /iPhone|iPad|iPod/i.test(ua);
    const isAndroid = /Android/i.test(ua);
    const isMobile = isIOS || isAndroid || width <= 768;
    return isMobile;
}

In the above code, we obtain the user-agent information of the browser and the width of the current window at the same time, through regular expressions and screen resolution to determine whether the user is logging in through a mobile phone.

Summary

Using JavaScript to determine whether the user logs in through a mobile phone can help us make corresponding optimizations and adjustments to improve the user experience of the website. This article introduces two judgment methods, namely using user-agent detection and screen resolution detection, and how to use them comprehensively. I hope this article can be helpful to all developers.

The above is the detailed content of How to determine whether it is a mobile login with javascript. For more information, please follow other related articles on the PHP Chinese website!