原文鏈接：https://github.com/helloyoucan/knowledge
1.常見問題
1.滾動穿透
有fixed遮罩層和彈出層，在屏幕上滑動能夠滑動背景下面的內(nèi)容。
解決
設(shè)置body為position:fixed，彈出前記錄滾動條位置，關(guān)閉后還原滾動條位置。
2.移動端輸入框被鍵盤遮擋
解決
- 監(jiān)聽窗口
resize事件，判斷當(dāng)前獲得焦點(diǎn)的元素為輸入框，則調(diào)用元素的scrollIntoView()。 - 若不支持
resize事件（app內(nèi)嵌的webview），則可以通過獲取輸入框焦點(diǎn)將輸入框定位到略高于輸入框的位置，失去焦點(diǎn)時(shí)在恢復(fù)到底部。（由于鍵盤高度不一致，但不會高于半個(gè)屏幕，可設(shè)位置為屏幕一半往上）
3.IOS滾動不平滑
當(dāng)滾動屏幕手指松開，滾動會停止。
解決
設(shè)置-webkit-overflow-scrolling:touch
auto:使用普通滾動, 當(dāng)手指從觸摸屏上移開，滾動會立即停止。
touch:使用具有回彈效果的滾動, 當(dāng)手指從觸摸屏上移開，內(nèi)容會繼續(xù)保持一段時(shí)間的滾動效果。
4.移動端字體
body {
font-family:
system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
Helvetica,Arial,
sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}
-
system-ui，使用各個(gè)支持平臺上的默認(rèn)系統(tǒng)字體 -
-apple-system， 在一些稍低版本 Mac OS X 和 iOS 上，它針對舊版上的 Neue Helvetica 和 Lucida Grande 字體，升級使用更為合適的 San Francisco Fonts -
BlinkMacSystemFont，針對一些 Mac OS X 上的 Chrome 瀏覽器，使用系統(tǒng)默認(rèn)字體 -
segoe ui，在 Windows 及 Windows Phone 上選取系統(tǒng)默認(rèn)字體 -
Roboto，面向 Android 和一些新版的的 Chrome OS -
Helvetica,Arial，在針對不同操作系統(tǒng)不同平臺設(shè)定采用默認(rèn)系統(tǒng)字體后，針對一些低版本瀏覽器的降級方案 -
sans-serif，兜底方案，保證字體風(fēng)格統(tǒng)一，至少也得是無襯線字體
5.移動端適配
flexible.js-
vh/vw（viewport）
6.移動端喚起app
<a href="abraham:/xxx.com/?pid=1">打開app</a>
// schema拼接協(xié)議的格式：[scheme]://[host]/[path]?[query]
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
var isiOS2 = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isAndroid) {
window.location.href = "安卓提供協(xié)議url";
/***打開app的協(xié)議，有安卓同事提供***/
window.setTimeout(function() {
window.location.href = '下載的地址';
}, 2000);
} else if (isiOS2) {
window.location.href = "IOS提供協(xié)議url";
/***打開app的協(xié)議，有ios同事提供***/
window.setTimeout(function() {
window.location.href = '下載的地址';
}, 2000);
} else {
window.location.href = '下載的地址';
}
7.設(shè)置height= line-height就是會存在無法垂直居中文字的現(xiàn)象，偏下或者偏上
1.padding
p{
/*高度為90px*/
font-size: .26rem;
padding: 0.22rem;
}
雖然上面的方法可以實(shí)現(xiàn)，但是用起來的時(shí)候經(jīng)常每次都要去計(jì)算高度（padding值等于設(shè)計(jì)高度減去font-size之后再/2），這樣就比較麻煩，而且，在針對多行的時(shí)候還得計(jì)算，于是我又采用了下面的方式。利用 css3 flex布局的特性。
2.flex
p{
font-size: .26rem;
height: 0.9rem;
display: flex;
display: -webkit-flex;
-webkit-align-items:center;
align-items:center;
box-pack-align: center;
-webkit-box-pack-align: center;
}
8. 取消input在ios下，輸入的時(shí)候英文首字母的默認(rèn)大寫
<input autocapitalize="off" autocorrect="off" />
9.android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
