前端判断设备环境的通用代码

一笑code

于 2024-12-07 10:00:00 发布

阅读量399

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_34425377/article/details/144260684

版权

简单快捷版（work）：

/**
 * Windows 系统
 */
export const isWin = (userAgent: string) =>
  /windows|win32|win64/i.test(userAgent.toLowerCase());

/**
 * mac 系统
 */
export const isMac = (userAgent: string) =>
  /macintosh|mac os x/i.test(userAgent.toLowerCase());

/**
 * 安卓
 */
export const isAndroid = (userAgent: string) =>
  /android|adr/i.test(userAgent.toLowerCase());

/**
 * 是否安卓平板
 * @param userAgent
 * @returns
 */
export const isAndroidPad = (userAgent: string) =>
  (isAndroid(userAgent) && !userAgent.toLowerCase().includes('mobile')) ||
  (isAndroid(userAgent) && (IS_SERVER ? global : window)?.screen?.width > 600);

/**
 * IOS
 */
export const isIOS = (userAgent: string) =>
  /iphone|ipod|ipad/i.test(userAgent.toLowerCase());

/**
 * iPhone
 */
export const isIPhone = (userAgent: string) =>
  /iphone/i.test(userAgent.toLowerCase());

/**
 * iPad
 */
export const isIPad = (userAgent: string) =>
  /ipad/i.test(userAgent.toLowerCase());

/**
 * ie 10
 */
export const isIE10 = (navigator: Navigator) =>
  navigator.appName === 'Microsoft Internet Explorer' &&
  parseInt(
    navigator.appVersion.split(';')[1].replace(/[ ]/g, '').replace('MSIE', ''),
    10,
  ) === 10;

/**
 * 微信浏览器
 */
export const isWeChat = (ua: string) =>
  /micromessenger/i.test(ua) && !/wxwork/i.test(ua);

/**
 * 企业微信
 */
export const isWxWork = (ua: string) =>
  /micromessenger/i.test(ua) && /wxwork/i.test(ua);

/*
 * 企业微信私有化
 */
export const isWxWorkLocal = (ua: string) =>
  /micromessenger/i.test(ua) && /wxworklocal/i.test(ua);

/**
 * 企业微信SaaS版
 */
export const isWxWorkSaas = (ua: string) => isWxWork(ua) && !isWxWorkLocal(ua);

/**
 * QQ
 */
export const isQQ = (ua: string) => ua.indexOf(' QQ/') > -1;
/**
 * Edge浏览器
 */
export const isEdge = (ua: string) => /Edge/.test(ua);
/**
 * 火狐浏览器
 */
export const isFF = (ua: string) => ua.toLowerCase().indexOf('firefox') !== -1;
/**
 * IE浏览器
 */
export const isIE = (ua: string) => /Trident/.test(ua);
/**
 * Safari 13.1 下滚动有兼容性问题
 */
export const isSafari13 = (ua: string): boolean =>
  /safari/i.test(ua) && /version\/13\.1/i.test(ua);

/**
 * 判断是否游戏内（接入了MSDK的）
 * @param ua
 */
export const isInMSDK = (): boolean => true;

const browsers = [
  { name: 'Samsung', test: /SamsungBrowser/i },
  { name: 'Edge', test: /edg([ea]|ios|)\//i },
  { name: 'Firefox', test: /firefox|iceweasel|fxios/i },
  { name: 'Chrome', test: /chrome|crios|crmo/i },
  { name: 'Safari', test: /safari|applewebkit/i },
];

export function getBrowserName(a: string): string {
  for (const b of browsers) {
    if (b.test.test(a)) {
      return b.name;
    }
  }
  return '';
}

export const checkIsMobile = () => {
  const ua = navigator.userAgent;
  return isAndroid(ua) || isIOS(ua);
};

export const isMacOsFlag = isMac(globalThis.window?.navigator.userAgent || '');

export const isIosFlag = isIOS(globalThis.window?.navigator.userAgent || '');

export const isAndroidFlag = isAndroid(
  globalThis.window?.navigator.userAgent || '',
);

export const isWinFlag = isWin(globalThis.window?.navigator.userAgent || '');

export const isMobileFlag = isIosFlag || isAndroidFlag;

nuxt框架版本

const REGEX_MOBILE1 =
  /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|FBAN|FBAV|fennec|hiptop|iemobile|ip(hone|od)|Instagram|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;

const REGEX_MOBILE2 =
  /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;

const REGEX_MOBILE_OR_TABLET1 =
  /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|FBAN|FBAV|fennec|hiptop|iemobile|ip(hone|od)|Instagram|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;

const REGEX_MOBILE_OR_TABLET2 =
  /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;

export function isMobile(userAgent: string): boolean {
  return (
    REGEX_MOBILE1.test(userAgent) || REGEX_MOBILE2.test(userAgent.slice(0, 4))
  );
}

export function isMobileOrTablet(userAgent: string): boolean {
  return (
    REGEX_MOBILE_OR_TABLET1.test(userAgent) ||
    REGEX_MOBILE_OR_TABLET2.test(userAgent.slice(0, 4))
  );
}

export function isIos(userAgent: string): boolean {
  return /iPad|iPhone|iPod/.test(userAgent);
}

export function isAndroid(userAgent: string): boolean {
  return /android/i.test(userAgent);
}

export function isWindows(userAgent: string): boolean {
  return /Windows/.test(userAgent);
}

export function isMacOS(userAgent: string): boolean {
  return /Mac OS X/.test(userAgent);
}

// Following regular expressions are originated from bowser(https://github.com/lancedikson/bowser).
// Copyright 2015, Dustin Diaz (the "Original Author")
// https://github.com/lancedikson/bowser/blob/master/LICENSE
const browsers = [
  { name: 'Samsung', regex: /SamsungBrowser/i },
  { name: 'Edge', regex: /edg(?:[ea]|ios)?\//i },
  { name: 'Firefox', regex: /firefox|iceweasel|fxios/i },
  { name: 'Chrome', regex: /chrome|crios|crmo/i },
  { name: 'Safari', regex: /safari|applewebkit/i },
];

export function getBrowserName(userAgent: string): string {
  for (const browser of browsers) {
    if (browser.regex.test(userAgent)) {
      return browser.name;
    }
  }

  return '';
}

export const isMobileFlag = isMobile(window?.navigator.userAgent || '');

export const isMacOsFlag = isMacOS(window?.navigator.userAgent || '');

export const isIosFlag = isIos(window?.navigator.userAgent || '');

export const isAndroidFlag = isAndroid(window?.navigator.userAgent || '');

export const isWindowsFlag = isWindows(window?.navigator.userAgent || '');