判断移动端所处浏览器环境：ios, android....的方法

最新推荐文章于 2024-07-29 08:30:00 发布

any_fight

最新推荐文章于 2024-07-29 08:30:00 发布

阅读量473

点赞数

分类专栏：前端文章标签： html5 android ios 小程序

本文链接：https://blog.csdn.net/weixin_42280395/article/details/113844014

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用JavaScript的navigator.userAgent属性来判断网页运行在何种浏览器环境中，包括iOS、Android、微信以及微信小程序。通过正则表达式匹配，可以识别出不同的设备和应用环境。

摘要由CSDN通过智能技术生成

分享一个能够在代码中判断网页所处浏览器环境的方法，还是直接上代码：

ios               // ios终端
android           // android终端或者uc浏览器
wechat            // 微信
wechatMiniprogram // 微信小程序

const browser = {
  get versions() {
    const userAgent = window.navigator.userAgent;
    return {
      // 移动终端浏览器版本信息
      ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
      android: userAgent.indexOf("Android") > -1 || userAgent.indexOf("Linux") > -1, // android终端或者uc浏览器
      wechat: userAgent.toLowerCase().indexOf("micromessenger") > -1,
      wechatMiniprogram:
        userAgent.toLowerCase().indexOf("micromessenger") > -1 &&
        userAgent.toLocaleLowerCase().indexOf("miniprogram") > -1,
    };
  },
};
export default browser;

大概说下原理： window.navigator.userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。
对应的是User-Agent字段，该字段内含有系统、环境、版本等信息