判断当前浏览器环境（移动端）

最新推荐文章于 2025-05-13 00:57:04 发布

原创最新推荐文章于 2025-05-13 00:57:04 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

4 篇文章

订阅专栏

这段代码主要用于检测前端运行环境，包括识别是否为Android、iOS、iPhone9+、Windows Phone、Windows系统、VIVO手机等设备，并判断是否是微信Webview、小米浏览器、触屏设备。同时，它还计算了安卓设备的屏幕尺寸和物理尺寸，以及是否是微信小程序的Webview。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端判断当前浏览器环境

VARS.UA = window.navigator.userAgent;
// HTC Flyer平板的UA字符串中不包含Android关键词
// 极速模式下视频不显示 UCWEB/2.0 (Linux; U; Adr 4.0.3; zh-CN; LG-E612) U2/1.0.0 UCBrowser/9.6.0.378 U2/1.0.0 Mobile
VARS.IsAndroid = !!(/Android|HTC|Adr/i.test(VARS.UA) || !!(window.navigator.platform + '').match(/Linux/i));
//是否为iOSpad
VARS.IsIpad = !VARS.IsAndroid && /iPad/i.test(VARS.UA);
//是否为iOS
VARS.IsIphone = !VARS.IsAndroid && /iPod|iPhone/i.test(VARS.UA);
//是否是iphone9+的设备
var osversion = VARS.UA.match(/iPhone OS (\d*)/);
if (osversion && osversion[1] >= 9) {
  VARS.IsIphone9Plus = true;
} else {
  VARS.IsIphone9Plus = false;
}
//是否是是否是windows phone
VARS.IsWindowsPhone = /Windows Phone/i.test(VARS.UA);
//是否是老版本windows phone(8.1之前算) winphone 8.1之前算old(采用全屏播放),8.1(含)之后，采用的是标准播放(小窗+假全屏)
VARS.IsOldWindowsPhone = /Windows\sPhone\s([1234567]\.|8\.0)/i.test(VARS.UA);
//是否是windows系统
VARS.IsWindows = /Windows/i.test(VARS.UA);
//是否是vivo手机
VARS.IsVivoPhone = /vivo/i.test(VARS.UA);
//计算安卓设备比
if (VARS.IsAndroid) {

  if ((window['screen']['width'] / window['innerWidth']).toFixed(2) === VARS.PixelRatio.toFixed(2)) {
    VARS.ScreenSizeCorrect = 1 / VARS.PixelRatio;
  }
}
VARS.AdrPadRegex = /pad|XiaoMi\/MiPad|lepad|YOGA|MediaPad|GT-P|SM-T|GT-N5100|sch-i800|HUAWEI\s?[MTS]\d+-\w+|Nexus\s7|Nexus\s8|Nexus\s11|Kindle Fire HD|Tablet|tab/i;
VARS.ScreenSize = Math.floor(window.screen['width'] * VARS.ScreenSizeCorrect) + 'x' + Math.floor(window.screen['height'] * VARS.ScreenSizeCorrect);
//根据这些值就可以反向算出屏幕的物理尺寸 ,屏幕尺寸=屏幕对角线的像素值/（密度*160）
//屏幕尺寸=Math.sqrt(Math.pow(width, 2)+Math.pow(height, 2))/ (密度*160)

//是否是微信 webview
VARS.IsWeixinBrowser = !!(window['WeixinJSBridge'] || /MicroMessenger/i.test(VARS.UA));
//是否是小米 browser
VARS.IsMiBrowser = !!(/MiuiBrowser/i.test(VARS.UA));
//是否支持触屏
VARS.IsTouch = 'ontouchstart' in window;
//是否是小米的设备
VARS.IsXiaoMI = /MI/i.test(VARS.UA);
//是否是索尼手机
VARS.IsSonyPhone = /Sony/i.test(VARS.UA);
//是否是PC设备
VARS.IsPC = !VARS.IsIOS && !VARS.IsAndroid && !VARS.IsWindowsPhone && !VARS.IsWindowsPad && !/Mobile/i.test(VARS.UA);
//是否是微信小程序 webview  小程序开发文档中建议方式 在网页内可通过window.__wxjs_environment变量判断是否在小程序环境
VARS.IsMiniProgramWebview = !!((window['WeixinJSBridge'] || /MicroMessenger/i.test(VARS.UA)) && /miniprogram/i.test(VARS.UA));