VBA抓取动态网页，紧盯股票主力资金

一篇文章用VBA下载一部完整小说，VBA除了可以轻松下载一部《水浒传》小说，还有什么用途？VBA获取网页信息（即爬虫技术）其用处可多了。今天介绍各位小伙用来监控的自选股票的主力资金变动的情况，愿大伙在2022年股票市场长红！也是把上期一个网友评论的内容（有些数据藏得很深，怎么找真正的地址……）回应一下。

东富的主力资金流入图

有一个理论我们会经常听到，A股的票涨涨跌跌主要是因为有大资金在活动、在操作，一些股票不断上涨是因为有主力资金不断买入，反而不断下跌是因为主力资金不断流出。喜欢做短线的，我们实时观察这些主力资金就变得很有意义，很多网站都有主力资金的数据，但是要对多支股票进行观察，则需要一个个打开网页、APP或者电脑程序查看数据，这样耗时也不能多支股票同框对比。还有一些小伙正上班，打开股票软件给老板或同事看到，总觉得怪怪的，当然这不是鼓励一些小伙上班玩股票，纯属用项目和大家一起交流学习。

用VBA就可以很轻松解决上述两个问题。大伙先看看效果吧！

点击按钮更新数据：2022年12月21日数据

完整代码如下：

Sub maincapital()

Application.DisplayAlerts = False
'循环A列数据，解析出相应股票代码
For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
stock_code = Right(cl, 6) '取右边6位字符
Dim strText, stcok_code As String
'拼接构造网址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=1." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With

'判断是有null，解决深A股和上A股网址不同拼接问题，secids=0.是深A；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
    .Pattern = "null"
    Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出现null则拼接构造一个新网址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=0." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With
End If

Rnum = cl.Row '股票名称所在行号
'利用正则表达式得到我们想要的内容，并写相应的表格
With CreateObject("VBScript.Regexp")
    .Pattern = """f62"":(.*?),"
Cells(Rnum, 2) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '主力净流进
    .Pattern = """f184"":(.*?),"
Cells(Rnum, 3) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '主力净比
    .Pattern = """f66"":(.*?),"
Cells(Rnum, 4) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '超大单净流进
    .Pattern = """f69"":(.*?),"
Cells(Rnum, 5) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '超大单净比
    .Pattern = """f72"":(.*?),"
Cells(Rnum, 6) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '大单净流进
    .Pattern = """f75"":(.*?),"
Cells(Rnum, 7) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '大单净比
    .Pattern = """f78"":(.*?),"
Cells(Rnum, 8) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '中单净流进
    .Pattern = """f81"":(.*?),"
Cells(Rnum, 9) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '中单净比
    .Pattern = """f84"":(.*?),"
Cells(Rnum, 10) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '小单净流进
    .Pattern = """f87"":(.*?),"
Cells(Rnum, 11) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '小单净比
    .Pattern = """f64"":(.*?),"
Cells(Rnum, 12) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大单流入
    .Pattern = """f65"":(.*?),"
Cells(Rnum, 13) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大流出
    .Pattern = """f70"":(.*?),"
Cells(Rnum, 14) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大单流入
    .Pattern = """f71"":(.*?),"
Cells(Rnum, 14) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大单流出
    
End With
Next
Application.DisplayAlerts = True
End Sub

这个项目用到的几个重要知识：

获取动态网页加载数据的真正网址；
使用CreateObject("MSXML2.XMLHTTP")对象获取网页信息，基本框架可以参考用VBA下载一部完整小说；
使用CreateObject("VBScript.Regexp")正则表达式对象，处理网页信息并写入表格；
点击按钮调用函数

获取动态网页加载数据的真正网址

我们在目标网页点击右键，并点击“查看网页源代码”后，当使用cttl+f键查看我们想要获取的信息进行查看（这里我输入主力净比数据-42.76），发现并没有相关的数据。

在源代码网页同时按cttl+f键查看

通过这个方法基本可以判断目标网页的部分数据是使用动态加载的方式。简单的动态加载数据，可以通过以下两步获取真正的网址：

第一步：打开浏览器控制台。演示使用的浏览器是chrome，按下F12键打开浏览器控制台，再次刷新网页，在控制台找到并点击扩大镜小按钮，打开search对话框，这里输入想找的数据（这里我输入主力净比数据42.76）后，按下回车键或输入框旁边的刷新按键，就会弹出一个“get”字符及一些类似网址的内容，点击弹出的内容，右下面对话框会弹出相应的内容（对话框的菜单有Headers,Preview,Response……）

图中主力净比数据为-42.73和在输入框的数据不一致，是因为资金数据动态变化了

第二步：找到加载数据的网址。点击Headers可以看到Resquest URl字符，后面网址就是加载数据真正的网址，复制网址在浏览器打开，我们可以看到相应的数据内容。获得这网址后，就可以通过VBA访问这个网址获取相应的数据，按下来的工作就好办了。

目标数据的网址

使用CreateObject("MSXML2.XMLHTTP")对象获取网页信息

stock_code = Right(cl, 6) '取右边6位字符
Dim strText, stcok_code As String '
'拼接构造网址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=1." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With

'判断是有null，解决深A股和上A股网址不同拼接问题，secids=0.是深A；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
    .Pattern = "null"
    Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出现null则拼接构造一个新网址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=0." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With
End If

上面代码的说明：

1、使用right(目标字符串，字符个数)函数获取目标字符串从右边数起第几个字符。

2、做两次网址请求是因为深A股和上A股的数据网址是有区别，网址的参数“secids=0.+ 股票代码”是深A；“secids=1.+股票代码”是上A。如果人为对每支股票判断是上A还深A会很复杂，所以使用正则表达式，对请求数据内容出现“null”字样的网址，则更换网址参数。如下图：

上A网址请求结果

深A网址请求结果

使用CreateObject("VBScript.Regexp")正则表达式对象获取数据

For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
……
Rnum = cl.Row '股票名称所在行号
'利用正则表达式得到我们想要的内容，并写相应的表格
With CreateObject("VBScript.Regexp")
    .Pattern = """f62"":(.*?)," 'VBA的英文的双引号
Cells(Rnum, 2) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '主力净流入
    .Pattern = """f184"":(.*?),"
Cells(Rnum, 3) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '主力净比
    .Pattern = """f66"":(.*?),"
……

上面代码的说明：

1、Range("a2").End(xlDown)是表示定位从A2单元往下最后一个不空值的单元格。

2、cl.Row是表示单元格的行数，Range("A1").Row，Cells(1, 1).Row都可以获取单元格行数，列值则是Range("A1").Column和Cells(1, 1).Column。

3、.Pattern = """f62"":(.*?)," 是正则表达式（网页的内容是："f62":-15043563520.0），VBA的英文的双引号用正则表式表示则是两个双引号，即是""。"f62":后面数据就是主力净流入的数据，用(.*?)表示。再用.submatches.Item(0)得到目标数据，这个数据是以元为单位，网页显示的是亿，所以要/100000000。

4、Round（目标数据,小数点位数）是取多少位小数的方法。

点击按钮调用函数

Private Sub CommandButton1_Click()
Call maincapital '调用函数
End Sub

在这总结一下VBA抓取数据主要步骤：

分析网站->>分析网页数据->>处理网页数据->>储存网页数据

欢迎大家评论及提意见，相互学习，提高效率，创造价值。

篇，我整理和测试了六款来自国际大部队的 Android 浏览器，包括大热门的 Chrome、支持丰富扩展的 Firefox、主打隐私安全的 Firefox Focus、颇有历史底蕴的 Opera，以及后来者 Microsoft Edge、Yandex。

除了国际大厂出品的产品外，国内开发者也在 Android 浏览器品类下发力，在保持简洁设计的基础上，它们希望寻求提供更多差异化的功能。这次我挑选了五款 Android 国产浏览器，一起来了解一下它们有怎样的表现，究竟有哪些亮点功能。

夸克：卡片风格 + 神奇的下载效果

首先登场的是被不少人「吐槽」的夸克浏览器，网上有朋友抱怨夸克经过近两年（2016 年 10 月发布了第一版）迭代更新，安装包体积是越来越大，甚至有反映说有些网站不能在夸克上打开（其他浏览器却能正常打开）。在我的使用体验中，我还没有碰到这些问题，夸克横空出现为当年浏览器产品界带来了一阵清新的风格。

夸克首屏

在经历近两年年时间的发展后，我认为夸克还是有几个值得赞赏的功能亮点：

简约的卡片风格

在应用主界面，夸克采用精简的布局元素：品牌 Logo、搜索框、精选网站导航以及底栏共四部分构建了简约的首屏效果。除此之外，卡片风格成为了夸克标志性的元素之一，后台标签页管理、菜单弹出样式均采用了卡片堆叠的风格。

轻应用

从去年年中推出的 v2.0 版本开始，夸克加入了轻应用的功能，将一些在垂直领域颇有人气和观点的社区网站重新封装，打包成轻应用。从整体的效果来看，夸克的轻应用在阅读体验上还是有一定的提升效果，这点对资讯类网站尤其明显，内容排版去除了恼人的广告以及其他无关元素，同时在打开速度上也有不错的表现。但是，轻应用仍然缺乏调整文字大小选项、夜间模式下对比度下降导致内容阅读出现「看不清晰」的问题。

神奇的下载效果

使用夸克下载网盘资源有着神奇的效果，官方号称支持多线程加速、多任务并行的特性，在采用默认的下载选项时，下载速度大约在 300KB-600KB/S 的区间内。如果要实现提速下载的话，按照下面的图示调整下载线程：

我们将下载线程调至 64，重新下载百度网盘的文件，速度可以稳定达到 2-5MB/S，这样实现了可能是手机端最简单百度网盘资源高速下载的方法之一。

适度的手势操作

夸克内置的手势操作显得很「克制」，并没有提供复杂的手势组合，仅支持了几个相当常用的操作习惯，比如滑动前进/后退、底部上滑返回首页、长按标签管理按钮打开新标签页。

同时，夸克还有几个省心的实用功能：解决打开某些网页时自动跳转第三方 Apps 的问题；自带的在线播放组件，适配了国内大部分视频网站，视频弹窗间接解决了视频页面的干扰元素；在输入网址时提供了快速补全工具条。

Via：几百 KB 的小身板

Via 的出现不禁发出这样的感叹：原来浏览器应用可以将体积做得如此小巧，首屏界面竟然可以做得如此纯粹简单，长时间体验过后在这八百多 KB 小身板上发现不少实用功能：

还你定制安静浏览器的权利

厌倦了浏览器首屏烦人的新闻内容、露骨的资讯标题，或者一大堆不感兴趣的快速访问导航，那么 Via 还你一个定制安静浏览器的权利。初次打开 Via 浏览器，不禁想起了一句话：这才是一款纯粹浏览器该有的样子，主页仅有顶栏和底栏的工具条、品牌 Logo 和搜索框。

虽然采用极简的主页设计风格，但是 Via 依然拥有丰富的定制选项，包括了在主页添加常用网站，Logo、背景图片、颜色风格、背景不透明度、隐藏搜索框，甚至给用户自定义 CSS 的方式更细致地调整界面效果。

丰富的在线插件体系

Via 另一大特色功能是拥有丰富的在线插件体系，打开菜单栏的工具箱，我们看到了十个小工具，其中源码和资源嗅探是我经常使用的功能之一。源码功能是为了偶尔学习一些网页编程的知识（对于我这个小白来说），而资源嗅探解决下载网页中的音乐、视频等资源，比如需要下载 Instagram 的视频，打开目标页面并播放视频后，依次选择 Via 浏览器「工具箱 - 资源嗅探」，将弹出真实的视频地址，接下来使用第三方下载工具保存至本地，或者点击资源地址后在新标签页单独播放视频。

除此之外，Via 还提供了多个实用在线插件，包括了知乎去网页限制、微信公众号音频下载、B 站视频下载、回到页面顶部/底部，用户只需打开设置选项的插件页面，即可在线安装和管理插件。

多种手势组合

与前面夸克相比，Via 支持更多的手势操作，目前提供了滑动前进/后退、长按标签管理按钮打开新标签页、长按主页按钮弹出网址输入框、长按底栏左右键实现回到网页顶部/底部、长按菜单按钮刷新页面、上滑主页键弹出后台标签页。虽然手势学习的成本略高，但熟练后大大提升了浏览器操作的效率。

X 浏览器：有趣的地址栏命令

X 浏览器首屏设计风格虽然不及 Via 来得纯粹，除了自带「合作」站点的网址导航外，并没有推送新闻资讯等干扰因素，下面是我在体验过后，找到了这款浏览器有趣的设计和强大的功能。

有趣的地址栏命令

与 Chrome 类似，X 浏览器支持在地址栏输入 x: 开头的特定代码，直接打开相应的功能：设置、历史记录、书签等，比如输入 x:setting 即可打开浏览器的设置页面。其他命令还包括了 x:as、x:custom、x:gs、x:adb、x:me、x:addon、x:info，尝试输入以上的命令，探索更多的便捷操作。

即时翻译和即时词典

X 浏览器提供了常规的网页全文翻译功能（使用百度翻译），在此基础上还带来了即时翻译和即时词典，其中即时翻译是在长按选择网页的单词时浏览器界面立刻显示翻译结果，即时词典则扩展了地址栏功能，用户输入单词时将看到翻译结果在备选项中。

为每个网站设置不同的浏览策略

X 浏览器支持对每个网站设置单独的浏览策略，比如打开知乎网站后，点击浏览器界面左上角的按钮，选择「网站设置」，可自定义广告拦截规则、切换独立 UA、禁止页面启动外部应用、禁用 JS、禁用 Cookies，将 UA 设置为 ipad 或者桌面后，可以突破知乎查看全部回答时跳转至 Apps 下载页面的问题。同理，运用不同的设置策略，可以突破 bilibili 在手机浏览器六分钟视频时长的限制。

内置实用又强大的插件

目前，X 浏览器内置了三款插件：二维码增强版本、微信朋友圈、ADM 下载器，虽然前面两个插件略显普通，但是 ADM 下载器却有着神奇的下载功效。不过吐槽一点的是每个插件下载后需要弹出单独的安装界面，对于一些朋友来说可能会有所反感。

最后，X 浏览器还拥有其他贴心的功能：嗅探媒体资源、强力广告拦截效果，希望这款浏览器继续保持这简单极致的风格，正如产品开发者所言：不完美但在原则上努力做到极致。

神奇浏览器：自主开发的阅读模式

神奇浏览器属于一个人开发的个性产品，仅约 900KB 的小身板，却同样拥有纯粹简洁的设计风格和网页浏览体验。除了拥有之前几款浏览器内置的广告拦截（神奇浏览器还有一个名为天网的广告拦截进阶功能）、翻译、ADM 下载插件外，神奇浏览器在下面两个方面有更加完善的功能。

分类显示嗅探的资源

与前面介绍的 Via 和 X 浏览器类似，神奇浏览器同样具备资源嗅探的功能，不过其提供的选项更加完整。神奇浏览器的资源嗅探支持分类显示图片、媒体、JS 文件、样式文件等大分类，让用户更容易找到希望下载的资源。

阅读模式

神奇阅读器是我在这次体验另中唯一支持阅读模式的 Android 国产浏览器，虽然与稍后读工具相比，其阅读体验上还有不少差距，但已经提供了字体大小、主题背景色更换的选项。在阅读模式下去除了网页干扰元素，相当适合阅读深度长文章。除了提升资讯站点阅读体验外，神奇浏览器的阅读模式还支持自动解析小说下一章，对在线小说爱好者会是一大福音。

星尘浏览器：小球设计和临时搜功能

星尘浏览器是凤凰工作室和世界之窗浏览器的创始人重新创业的作品之一，从浏览器的 Logo 图标依稀看到当年世界之窗的影子。

有趣的一级菜单设置页

如果厌倦了浏览器多级菜单的设置项，开关某个功能时需要打开多级路径。星尘浏览器的设置项摒弃了多级菜单，仅仅保留了一级菜单，将全部功能开关项放置在一个页面，方便用户更加直观地了解浏览器究竟提供了哪些功能选项。

快捷的交互操作

星尘浏览器拥有一个标志性的小球设计，用户通过底栏的主页键可快速完成常用操作，小球支持左右滑动切换标签页，向上滑动关闭当前页面。

临时搜

星尘浏览器将地址栏放置在界面底部，并且在其右侧加入了「临时搜」的按钮，用户选中搜索词，可以直接实现搜索功能，或者点击临时搜的图标后手动输入搜索的内容，简化了网页二次跳转的操作步骤。

结语

在体验了这五款 Android 国产浏览器后，我发现了它们在手势操作、实用插件等功能上发力，这些在 Chrome、Firefox 国际大厂出品的浏览器上均没有提供，深入使用后我认为这些小细节确实大大提升了浏览器的操作效率和网页浏览体验。

所以，我希望将这几款浏览器介绍给正在寻求好用 Android 浏览器的朋友，欢迎你们在留言区写下对这些浏览器点赞、吐槽的内容。

时候，前端网页需要知道，用户使用的是手机浏览器还是桌面浏览器。

本文根据 StackOverflow，整理了 JavaScript 侦测手机浏览器的五种方法。

一、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) ) { // 当前设备是移动设备 }

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

Chromium 系的浏览器，还有一个navigator.userAgentData属性，也是类似的作用。不同之处是它将 user agent 字符串解析为一个对象，该对象的mobile属性，返回一个布尔值，表示用户是否使用移动设备。

const isMobile = navigator.userAgentData.mobile;

注意，苹果的 Safari 浏览器和 Firefox 浏览器都不支持这个属性，具体情况可以查看 Caniuse 网站。

此外，还有一个已经废除的navigator.platform属性，所有浏览器都支持，所以也可以用。它返回一个字符串，表示用户的操作系统。

if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) { // 当前设备是移动设备 }

二、window.screen，window.innerWidth

另一种方法是通过屏幕宽度，判断是否为手机。

window.screen对象返回用户设备的屏幕信息，该对象的width属性是屏幕宽度（单位为像素）。

if (window.screen.width < 500) { // 当前设备是移动设备 }

上面示例中，如果屏幕宽度window.screen.width小于500像素，就认为是手机。

这个方法的缺点在于，如果手机横屏使用，就识别不了。

另一个属性window.innerWidth返回浏览器窗口里面的网页可见部分的宽度，比较适合指定网页在不同宽度下的样式。

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"; } };

三、window.orientation

第三种方法是侦测屏幕方向，手机屏幕可以随时改变方向（横屏或竖屏），桌面设备做不到。

window.orientation属性用于获取屏幕的当前方向，只有移动设备才有这个属性，桌面设备会返回undefined。

if (typeof window.orientation !== 'undefined') { // 当前设备是移动设备 }

注意，iPhone 的 Safari 浏览器不支持该属性。

四、touch 事件

第四种方法是，手机浏览器的 DOM 元素可以通过ontouchstart属性，为touch事件指定监听函数。桌面设备没有这个属性。

function isMobile() { return ('ontouchstart' in document.documentElement); } // 另一种写法 function isMobile() { try { document.createEvent("TouchEvent"); return true; } catch(e) { return false; } }

五、window.matchMedia()

最后一种方法是结合 CSS 来判断。

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

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

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

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

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

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

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

有些设备支持多种指针，比如同时支持鼠标和触摸。pointer:coarse只用来判断主指针，此外还有一个any-pointer命令判断所有指针。

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

上面示例中，any-pointer:coarse表示所有指针里面，只要有一个指针是不精确的，就符合查询条件。

六、工具包

除了上面这些方法，也可以使用别人写好的工具包。这里推荐 react-device-detect，它支持多种粒度的设备侦测。

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

（完）

在线咨询

上一篇：HTML5游戏如何利用渠道传播
下一篇：修改eclipse自带格式化插件，美化格式化后样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商