浏览器兼容性问题

1.滚动条兼容性

• overflow-y未超出仍然显示滚动条解决办法

p {
    max-height: 100px;
    overflow-y: scroll;
  }

效果：即使不超过这个高度，也会出现右边的滚动条，显然不是想要的（windows 上的IE 和 Firefox 亲测）；不超过这个高度，不出现右边的滚动条（mac 上 Chrome Firefox 亲测）。

改进如下：

p {
     max-height: 100px;
     overflow-y: auto;
 }

效果是：不超过最大高度，不显示滚动条，超过则出现滚动条。（windows和mac 亲测）

• 获取/设置scrolltop兼容各浏览器的方法

1. 页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
2. 页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容，不管有没有 DTD，可以使用如下代码：

var scrollTop = window.pageYOffset  //用于FF Safari
                || document.documentElement.scrollTop  
                || document.body.scrollTop  

2.文字渐变色

css文字渐变写法

background: linear-gradient(to right, #416CF8, #EC55FF);
background: -webkit-linear-gradient(to right, #416CF8, #EC55FF);
background: -o-linear-gradient(to right, #416CF8, #EC55FF);
background: -moz-linear-gradient(to right, #416CF8, #EC55FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

特殊情况：

1.Safari浏览器中，wap端会出现渐变色的竖线

原因：父元素tansform的translate样式的影响，移动会影响到

解决：mobile端不使用translate样式

.parent {
    top: 41%;
    left: 59%;
    transform: translate(-50%, -50%);
    @media screen and (max-width:768px) { // mobile
      transform: none;
      top: 24%;
      left: calc(50% - 295px/2);
    }
}

在IE浏览器中不支持这种写法，可以使用svg在IE浏览器中实现文字渐变效果

<svg class="gbt-svg">
  <defs>
    <!-- x1-x2：x transform y1-y2：y transform -->
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#416CF8; stop-opacity:1" />
      <stop offset="100%" style="stop-color:#EC55FF; stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- text center -->
  <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" fill="url(#grad)" class="gbt-svg-text">{{ $t('becomeMember') }}</text>
<!-- <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" style="fill:url(#grad)" class="gbt-svg-text">{{ $t('becomeMember') }}</text> -->
</svg>

<text>的css写法:

.gbt-svg-text {
    fill: url(#id);
    // fil: #f00;
}

非IE浏览器还是用css实现字体渐变色，由于不同浏览器的字体大小、行高，svg需要指定宽高问题，需要针对浏览器对svg样式微调，比较复杂

最终，chrome采用css，IE采用svg

// IE浏览器判断
var isIE11 = navigator.userAgent.indexOf('Trident') > -1

3.浏览器判断

export const isChrome = () => {
  const isChromium = window.chrome;
  const winNav = window.navigator;
  const vendorName = winNav.vendor;
  const isOpera = typeof window.opr !== 'undefined';
  const isIEedge = /Edge|Edg|EdgiOS/.test(winNav.userAgent);
  const isIOSChrome = winNav.userAgent.match('CriOS');

  if (isIOSChrome) {
    // is Google Chrome on IOS
    return 'iOSChrome';
  } else if (
    isChromium !== null &&
    typeof isChromium !== 'undefined' &&
    vendorName === 'Google Inc.' &&
    isOpera === false &&
    isIEedge === false
  ) {
    return 'chrome';
  } else {
    return false;
  }
};

export const isSafari = () => {
  return /^((?!chrome|android).)*safari/i.test(window.navigator.userAgent);
};

export const isChinaBrowser = () => {
  const UA = window.navigator.userAgent.toLowerCase();

  if (is360() && isChrome()) {
    return true;
  }
  if (
    UA.indexOf('qqbrowser') > -1 ||
    UA.indexOf('ucbrowser') > -1 ||
    UA.indexOf('ubrowser') > -1 ||
    UA.indexOf('baidu') > -1 ||
    UA.indexOf('se') > -1 ||
    UA.indexOf('aoyou') > -1 ||
    UA.indexOf('maxthon') > -1 ||
    UA.indexOf('greenbrowser') > -1 ||
    UA.indexOf('liebao') > -1 ||
    UA.indexOf('lbbrowser') > -1
  ) {
    return true;
  }
  return false;
};

export const is360 = () => {
  const is360 = _mime('type', 'application/vnd.chromium.remoting-viewer') || !navigator.userActivation;
  function _mime(option, value) {
    var mimeTypes = navigator.mimeTypes;
    for (var mt in mimeTypes) {
      if (mimeTypes[mt][option] == value) {
        return true;
      }
    }
    return false;
  }
  return is360;
};

export const getBrowserType = () => {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return 'weixin';
  } else if (ua.match(/QQ/i) == 'qq') {
    if (ua.match(/MQQBrowser/i) == 'mqqbrowser') {
      return 'QQ';
    } else {
      return 'QQ-Build-In';
    }
  } else if (ua.match(/Baidu/i) == 'baidu') {
    return 'Baidu';
  }
  return '';
};


var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器

参考地址：

html - JavaScript: How to find out if the user browser is Chrome? - Stack Overflow

4.系统判断

navigator.platform

已弃用：不再推荐此功能。虽然一些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能只是为了兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作。

注意：推荐的替代此属性的是NavigatorUAData.platform，它是从 返回的Navigator.userAgentData。

navigator.userAgentData.platform 支持的浏览器：Chrome、Edge、Opera，大多数不支持 弃用

navigator.userAgent 使用

使用navigator.platform进行判断：

let appVersion = window.navigator.appVersion;
let platform = window.navigator.platform;
if (appVersion.indexOf("Android") > -1) {
  return "android";
} else if (
  appVersion.indexOf("iPhone") > -1 ||
  appVersion.indexOf("iPod") > -1 ||
  appVersion.indexOf("iPad") > -1
) {
    return "ios";
}
if (platform.indexOf("Linux") > -1) {
  return "linux";
} else if (appVersion.indexOf("Mac") > -1) {
  return "mac";
} else if (appVersion.indexOf("Win") > -1) {
  return "windows";
} else if (appVersion.indexOf("X11") > -1) {
  return "unix";
} else {
  return "default system";
}

使用navigator.userAgent判断：

const u = navigator.userAgent;

if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 || u.indexOf('XiaoMi') > -1 || u.indexOf('Linux') > -1;) {
    return 'andriod';
} else if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
    return 'ios'
} else if (u.toUpperCase().indexOf('MAC') >= 0) {
    return 'mac'
} else if (u.toUpperCase().indexOf('WIN') >= 0) {
    return 'win'
} else if (u.toUpperCase().indexOf('ANDROID') === -1 && u.toUpperCase().indexOf('LINUX') >= 0) {
    return 'linux'
} else {
    return 'default system'
}

参考地址：

Navigator.platform - Web APIs | MDN

Navigator.userAgentData - Web APIs | MDN