判断手机浏览器还是桌面浏览器

古城微笑少年丶 2022-09-15 15:53 4阅读 0赞

**目录**

（1）使用navigator.userAgent

（2）使用window.matchMedia()

（3）使用react-device-detect

--------------------

## （1）使用navigator.userAgent ##

最简单的方法就是分析浏览器的 user agent 字符串，它包含了设备信息。

JS 通过`navigator.userAgent`属性拿到这个字符串，只要里面包含`mobi`、`android`、`iphone`等关键字，就可以认定是移动设备。

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
      // 当前设备是移动设备
    }
    
    // 另一种写法
    if (
      navigator.userAgent.match(/Mobi/i) ||
      navigator.userAgent.match(/Android/i) ||
      navigator.userAgent.match(/iPhone/i)
    ) {
      // 当前设备是移动设备
    }

这种方法的优点是简单方便，缺点是不可靠，因为用户可以修改这个字符串，让手机浏览器伪装成桌面浏览器。

--------------------

## （2）使用window.matchMedia() ##

CSS 通过 media query（媒介查询）为网页指定响应式样式。如果某个针对手机的 media query 语句生效了，就可以认为当前设备是移动设备。

`window.matchMedia()`方法接受一个 CSS 的 media query 语句作为参数，判断这个语句是否生效。

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

上面示例中，`window.matchMedia()`的参数是一个 CSS 查询语句，表示只对屏幕宽度不超过 760 像素的设备生效。它返回一个对象，该对象的`matches`属性是一个布尔值。如果是`true`，就表示查询生效，当前设备是手机。

除了通过屏幕宽度判断，还可以通过指针的精确性判断。

let isMobile = window.matchMedia("(pointer:coarse)").matches;

上面示例中，CSS 语句`pointer:coarse`表示当前设备的指针是不精确的。由于手机不支持鼠标，只支持触摸，所以符合这个条件。

--------------------

## （3）使用react-device-detect ##

除上述方法，还可以使用工具包。推荐 [react-device-detect][]，支持多种粒度的设备检测。

import {isMobile} from 'react-device-detect';
    
    if (isMobile) {
      // 当前设备是移动设备
    }

[react-device-detect]: https://www.npmjs.com/package/react-device-detect

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 java判断请求是浏览器发送的还是黑客发送的

Java中可以使用HttpServletRequest的getHeader("User-Agent")方法来获取请求的User-Agent头信息，根据该信息来判断请求是浏览器发

Myth丶恋晨/ 2023年09月25日 16:04/ 0 赞/ 61 阅读

相关 uni-app 判断浏览器是在普通浏览器中还是微信浏览器中

uni-app判断 let status = navigator.userAgent.toLowerCase(); if (status.

左手的ㄟ右手/ 2023年01月16日 09:44/ 0 赞/ 247 阅读

相关判断请求来自浏览器还是手机工具类

/ 判断请求来自浏览器还是手机 / public class IsMobileUtil { private final s

约定不等于承诺〃/ 2022年12月27日 08:20/ 0 赞/ 288 阅读

相关 JavaScript-----判断是否为手机浏览器访问

<script type="text/javascript"> if ((navigator.userAgent.match(/(iPhone|i

阳光穿透心脏的1/2处/ 2022年09月21日 15:22/ 0 赞/ 215 阅读

相关判断手机浏览器还是桌面浏览器

目录（1）使用navigator.userAgent （2）使用window.matchMedia() （3）使用react-device-detect ------

古城微笑少年丶/ 2022年09月15日 15:53/ 0 赞/ 5 阅读

相关判断浏览器

<script language="javascript" type="text/javascript"> function userAgent(){

拼搏现实的明天。/ 2022年08月07日 03:33/ 0 赞/ 216 阅读

相关判断手机是android还是ios，是否用了微信内置浏览器，判断是移动端还是pc端

$(function(){ var u = navigator.userAgent; var isAndroid = u.indexOf('An

旧城等待，/ 2022年06月07日 08:35/ 0 赞/ 264 阅读

相关 js判断访问浏览器是安卓还是ios还是微信浏览器还是微博

var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.index

末蓝、/ 2022年04月12日 11:08/ 0 赞/ 391 阅读

相关 JS判断手机浏览器

判断原理： JavaScript是前端开发的主要语言，我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法，一

た入场券/ 2022年04月10日 08:18/ 0 赞/ 321 阅读

相关判断当前是否是微信浏览器,还是APP客户端

/ 判断当前是否是微信浏览器,还是APP客户端 / function isWeixinEsz() {

我会带着你远行/ 2021年12月22日 02:45/ 0 赞/ 378 阅读