原文链接：https://github.com/helloyoucan/knowledge
1.常见问题
1.滚动穿透
有fixed遮罩层和弹出层，在屏幕上滑动能够滑动背景下面的内容。
解决
设置body为position:fixed，弹出前记录滚动条位置，关闭后还原滚动条位置。
2.移动端输入框被键盘遮挡
解决
- 监听窗口
resize事件，判断当前获得焦点的元素为输入框，则调用元素的scrollIntoView()。 - 若不支持
resize事件（app内嵌的webview），则可以通过获取输入框焦点将输入框定位到略高于输入框的位置，失去焦点时在恢复到底部。（由于键盘高度不一致，但不会高于半个屏幕，可设位置为屏幕一半往上）
3.IOS滚动不平滑
当滚动屏幕手指松开，滚动会停止。
解决
设置-webkit-overflow-scrolling:touch
auto:使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch:使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。
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，使用各个支持平台上的默认系统字体 -
-apple-system， 在一些稍低版本 Mac OS X 和 iOS 上，它针对旧版上的 Neue Helvetica 和 Lucida Grande 字体，升级使用更为合适的 San Francisco Fonts -
BlinkMacSystemFont，针对一些 Mac OS X 上的 Chrome 浏览器，使用系统默认字体 -
segoe ui，在 Windows 及 Windows Phone 上选取系统默认字体 -
Roboto，面向 Android 和一些新版的的 Chrome OS -
Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案 -
sans-serif，兜底方案，保证字体风格统一，至少也得是无衬线字体
5.移动端适配
flexible.js-
vh/vw（viewport）
6.移动端唤起app
<a href="abraham:/xxx.com/?pid=1">打开app</a>
// schema拼接协议的格式：[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 = "安卓提供协议url";
/***打开app的协议，有安卓同事提供***/
window.setTimeout(function() {
window.location.href = '下载的地址';
}, 2000);
} else if (isiOS2) {
window.location.href = "IOS提供协议url";
/***打开app的协议，有ios同事提供***/
window.setTimeout(function() {
window.location.href = '下载的地址';
}, 2000);
} else {
window.location.href = '下载的地址';
}
7.设置height= line-height就是会存在无法垂直居中文字的现象，偏下或者偏上
1.padding
p{
/*高度为90px*/
font-size: .26rem;
padding: 0.22rem;
}
虽然上面的方法可以实现，但是用起来的时候经常每次都要去计算高度（padding值等于设计高度减去font-size之后再/2），这样就比较麻烦，而且，在针对多行的时候还得计算，于是我又采用了下面的方式。利用 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下，输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
9.android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
