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相容各浏覽器的方法
- 頁面具有 DTD，或者說指定了 DOCTYPE 時，使用 document.documentElement。
- 頁面不具有 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
![一場春雨，一個帶着泥土芬芳的記憶[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)