9.移动web端

原文链接：https://github.com/helloyoucan/knowledge

1.常见问题

1.滚动穿透

有fixed遮罩层和弹出层，在屏幕上滑动能够滑动背景下面的内容。

解决

设置body为position:fixed，弹出前记录滚动条位置，关闭后还原滚动条位置。

2.移动端输入框被键盘遮挡

解决

1. 监听窗口resize事件，判断当前获得焦点的元素为输入框，则调用元素的scrollIntoView()。
2. 若不支持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;
}

1. system-ui，使用各个支持平台上的默认系统字体
2. -apple-system， 在一些稍低版本 Mac OS X 和 iOS 上，它针对旧版上的 Neue Helvetica 和 Lucida Grande 字体，升级使用更为合适的 San Francisco Fonts
3. BlinkMacSystemFont，针对一些 Mac OS X 上的 Chrome 浏览器，使用系统默认字体
4. segoe ui，在 Windows 及 Windows Phone 上选取系统默认字体
5. Roboto，面向 Android 和一些新版的的 Chrome OS
6. Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案
7. sans-serif，兜底方案，保证字体风格统一，至少也得是无衬线字体

5.移动端适配

1. flexible.js
2. 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}