Five methods for JavaScript to detect mobile browsers
Sometimes, the front-end webpage needs to know whether the user is using a mobile browser or a desktop browser.
Based on StackOverflow , this article sorts out five methods for JavaScript to detect mobile browsers.
One, navigator.userAgent
The easiest way is to analyze the user agent string of the browser, which contains the device information.
By JS
navigator.userAgent
property to get the string, which contains long
mobi
,
android
,
iphone
keywords like, can be identified as a mobile device.
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 当前设备是移动设备 } // 另一种写法 if ( navigator.userAgent.match(/Mobi/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // 当前设备是移动设备 }
The advantage of this method is that it is simple and convenient, but the disadvantage is that it is unreliable, because the user can modify this string to make the mobile browser pretend to be a desktop browser.
Chromium-based browsers also have an
navigator.userAgentData
attribute that
has a
similar effect.
The difference is that it parses the user agent string into an object, and the
mobile
attribute of
the object
returns a Boolean value indicating whether the user uses a mobile device.
const isMobile = navigator.userAgentData.mobile;
Note that Apple’s Safari browser and Firefox browser do not support this attribute, you can check the Caniuse website for details .
In addition, there is an abolished
navigator.platform
attribute
, which is supported by all browsers, so it can also be used.
It returns a string that represents the user’s operating system.
if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) { // 当前设备是移动设备 }
Two, window.screen, window.innerWidth
Another method is to determine whether it is a mobile phone by the width of the screen.
window.screen
The object returns the screen information of the user device, and the
width
attribute of
the object
is the screen width (in pixels).
if (window.screen.width < 500) { // 当前设备是移动设备 }
In the above example, if the screen width is
window.screen.width
less than 500 pixels, it is considered a mobile phone.
The disadvantage of this method is that if the phone is used horizontally, it cannot be recognized.
Another attribute
window.innerWidth
returns the width of the visible part of the webpage in the browser window, which is more suitable for specifying the style of the webpage under different widths.
const getBrowserWidth = function() { if (window.innerWidth < 768) { return "xs"; } else if (window.innerWidth < 991) { return "sm"; } else if (window.innerWidth < 1199) { return "md"; } else { return "lg"; } };
Three, window.orientation
The third method is to detect the orientation of the screen. The phone screen can change its orientation (horizontal or vertical) at any time, but it cannot be done on desktop devices.
window.orientation
The property is used to get the current orientation of the screen. Only mobile devices have this property, and desktop devices will return it
undefined
.
if (typeof window.orientation !== 'undefined') { // 当前设备是移动设备 }
Note that the iPhone’s Safari browser does not support this attribute.
Four, touch event
The fourth method is that the DOM element of the mobile browser can
specify the listener function
ontouchstart
for the
touch
event
through the
attribute
.
Desktop devices do not have this attribute.
function isMobile() { return ('ontouchstart' in document.documentElement); } // 另一种写法 function isMobile() { try { document.createEvent("TouchEvent"); return true; } catch(e) { return false; } }
Five, window.matchMedia()
The last method is to judge with CSS.
CSS specifies responsive styles for web pages through media query. If a certain media query statement for a mobile phone takes effect, the current device can be considered as a mobile device.
window.matchMedia()
The method accepts a CSS media query statement as a parameter to determine whether the statement is valid.
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
In the above example,
window.matchMedia()
the parameter is a CSS query statement, which means that it is only valid for devices with a screen width of no more than 700 pixels.
It returns an object whose
matches
property is a boolean value.
If it is
true
, it means that the query is valid and the current device is a mobile phone.
In addition to judging by the screen width, you can also judge by the accuracy of the pointer.
let isMobile = window.matchMedia("(pointer:coarse)").matches;
In the above example, the CSS statement
pointer:coarse
indicates that the pointer of the current device is inaccurate.
Since the mobile phone does not support the mouse, it only supports touch, so it meets this condition.
Some devices support multiple pointers, such as mouse and touch at the same time.
pointer:coarse
It is only used to determine the main pointer, and there is also a
any-pointer
command to determine all pointers.
let isMobile = window.matchMedia("(any-pointer:coarse)").matches;
In the above example, it
any-pointer:coarse
means that among all the pointers, as long as one pointer is inaccurate, it meets the query conditions.
Six, tool kit
In addition to the above methods, you can also use a toolkit written by others. Recommended here is react-device-detect , which supports device detection with multiple granularities.
import {isMobile} from 'react-device-detect'; if (isMobile) { // 当前设备是移动设备 }
(over)