JS Code block 代码块–环境判断

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 291 views

环境判断
判断是否在微信环境
是否安卓环境
是否iphone环境
是否ios环境(包括iPhone和ipad)
是否safari环境
是否为windows系统
是否为mac系统(包含iphone手机)
是否是支付宝内核
是否是QQ浏览器内核
是否是UC浏览器内核
是否是微博内核
获取浏览器的类型
获取设备像素比
判断 iPhone X Series 机型,刘海屏

/**
* 判断是否在微信环境
* @return {boolean}
*/
function isWeixin() {
    // 如果需要可以增加判断电脑版微信和开发者工具:/WindowsWechat/i.test(ua) && /WechatDevTools/i.test(ua)
    return (/MicroMessenger/i.test(window.navigator.userAgent));
}
 
/**
* 是否安卓环境
* @return {boolean}
*/
function isAndroid() {
    return /Android/i.test(navigator.userAgent) || /Linux/i.test(navigator.appVersion);
}
 
/**
* 是否iphone环境
* @return {boolean}
*/
function iphoneCheck() {
    return /iPhone/i.test(navigator.userAgent);
}
 
/**
* 是否ios环境(包括iPhone和ipad)
* @return {boolean}
*/
function isIOS() {
    return (/ipad|iphone/i.test(navigator.userAgent));
}
 
/**
* 是否safari环境
* @return {boolean}
*/
function isSafari() {
    return (/msie|applewebkit.+safari/i.test(navigator.userAgent));
}
 
/** * 是否为windows系统 * */
const isWindows = function() { 
    return /windows|win32/i.test(navigator.userAgent);
}
 
/** * 是否为mac系统(包含iphone手机) * */ 
const isMac = function() { 
    return /macintosh|mac os x/i.test(navigator.userAgent); 
}
 
/**
 * 是否是支付宝内核
 * @returns {boolean}
 * @example
 * inAlipay();
 * // => false
 */
function inAlipay() {
  if (typeof navigator === 'undefined') return;
  const ua = navigator.userAgent.toLowerCase();
  return ua.indexOf('alipayclient') !== -1;
}
 
/**
 * 是否是QQ浏览器内核
 * @returns {boolean}
 * @example
 * inQQBrowser();
 * // => false
 */
function inQQBrowser() {
  if (typeof window.navigator === 'undefined') return;
  const ua = window.navigator.userAgent.toLowerCase();
  return ua.indexOf('mqqbrowser') !== -1;
}
 
/**
 * 是否是UC浏览器内核
 * @returns {boolean}
 * @example
 * inUCBrowser();
 * // => false
 */
function inUCBrowser() {
  if (typeof window.navigator === 'undefined') return;
  const ua = window.navigator.userAgent.toLowerCase();
  return ua.indexOf('ucbrowser') !== -1;
}
 
/**
 * 是否是微博内核
 * @returns {boolean}
 * @example
 * inWeibo();
 * // => false
 */
function inWeibo() {
  if (typeof navigator === 'undefined') return;
  const ua = navigator.userAgent.toLowerCase();
  return ua.indexOf('weibo') !== -1;
}
 
/**
* 获取浏览器的类型
* @return {string}
*/
function browserType() {
    let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    let isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    let isIE =
      userAgent.indexOf("compatible") > -1 &&
      userAgent.indexOf("MSIE") > -1 &&
      !isOpera; //判断是否IE浏览器
    let isIE11 =
      userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
    let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
    let isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
    let isSafari =
      userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
    let isChrome =
      userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
 
    if (isIE) {
      let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
      reIE.test(userAgent);
      let fIEVersion = parseFloat(RegExp["$1"]);
      if (fIEVersion == 7) return "IE7";
      else if (fIEVersion == 8) return "IE8";
      else if (fIEVersion == 9) return "IE9";
      else if (fIEVersion == 10) return "IE10";
      else return "IE7以下"; //IE版本过低
    }
    if (isIE11) return "IE11";
    if (isEdge) return "Edge";
    if (isFF) return "FF";
    if (isOpera) return "Opera";
    if (isSafari) return "Safari";
    if (isChrome) return "Chrome";
  }
 
/**
 * 获取设备像素比
 * @returns {number}
 * @example
 * // window.navigator.appVersion(5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1)
 * getPixelRatio();
 * // => 2
 */
function getPixelRatio() {
  let ctx = document.createElement('canvas').getContext('2d');
  let dpr = window.devicePixelRatio || 1;
  let bsr = ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio || 1;
  return dpr / bsr;
}
 
/**
 * 判断 iPhone X Series 机型,刘海屏
 * @returns {boolean}
 * @example
 * isPhoneX()
 * => true
 */
function isPhoneX() {
  // X XS, XS Max, XR
  const xSeriesConfig = [
    {
      devicePixelRatio: 3,
      width: 375,
      height: 812
    },
    {
      devicePixelRatio: 3,
      width: 414,
      height: 896
    },
    {
      devicePixelRatio: 2,
      width: 414,
      height: 896
    }
  ];
  // h5
  if (typeof window !== 'undefined' && window) {
    const isIOS = /iphone/gi.test(window.navigator.userAgent);
    if (!isIOS) return false;
    const {devicePixelRatio, screen} = window;
    const {width, height} = screen;
    return xSeriesConfig.some((item) => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height);
  }
  return false;
}

Tags:

文章作者: Lee

本文地址: https://www.pomelolee.com/2352.html

除非注明,Pomelo Lee文章均为原创,转载请以链接形式标明本文地址

No comments yet.

Leave a comment

Search

文章分类

Links

Meta