一、iOS 滑动不流畅
上下滑动页面时会产生卡顿，手指离开页面后，页面立即停止运动。
解决方法：
在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto：
-webkit-overflow-scrolling:touch;/* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling:auto;/* 当手指从触摸屏上移开，滚动会立即停止 */
二、iOS上拉或者下拉页面时出现空白
手指按住屏幕下拉，屏幕顶部会多出一块白色区域；当手指按住屏幕上拉，底部多出一块白色区域。原因是在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。
解决方法：
通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动：
document.body.addEventListener('touchmove',function(e){
if(e._isScroller) return;
e.preventDefault();
}, {
passive:false
})
三、软键盘将页面顶起来，input失焦后页面没有回弹
点击input框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，页面未回落。
解决方法：
解决办法为，在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：
focus() {
this.scrollTop =document.scrollingElement.scrollTop;
},
blur() {
document.scrollingElement.scrollTo(0,this.scrollTop);
}
四、调用系统的功能
<a href="tel:10086">打电话给: 10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a>
五、打开原生应用
<a href="weixin://">打开微信</a>
<a href="alipays://">打开支付宝</a>
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫功能</a>
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>
这种方式叫做URL Scheme，是一种协议，一般用来访问APP或者APP中的某个功能/页面（如唤醒APP后打开指定页面或者使用某些功能）。
注：
1.唤醒APP的条件是你的手机已经安装了该APP；
2.某些浏览器会禁用此协议，比如微信内部浏览器（除非开了白名单）。
六、忽略自动识别为号码或邮箱
1. 忽略浏览器自动识别数字为电话号码
<meta name="format-detection" content="telephone=no" />
2.忽略浏览器自动识别邮箱账号
<meta name="format-detection" content="email=no" />
当页面上的内容包含了手机号/邮箱等，会自动转换成可点击的链接，比如<p>13192733603</p>，有些浏览器会识别为手机号，并且可以点击拨号。
七、禁止长按
1.禁止长按图片保存
img {
-webkit-touch-callout:none;
pointer-events:none; // 像微信浏览器还是无法禁止，加上这行样式即可
}
2.禁止长按选择文字
* {
-webkit-touch-callout:none; /*系统默认菜单被禁用*/
-webkit-user-select:none; /*webkit浏览器*/
-khtml-user-select:none; /*早期浏览器*/
-moz-user-select:none; /*火狐*/
-ms-user-select:none; /*IE10*/
user-select:none;
}
但是这样写的话在ios上会出现输入框无法输入的问题，所以要加上以下代码
input,
textarea {
-webkit-user-select:text;
}
3.禁止长按呼出菜单
div {
-webkit-touch-callout:none;
}
八、屏幕旋转为横屏时，字体大小会变
* {
-webkit-text-size-adjust:100%;
}
文章参考来源：公众号全栈前端精选以及前端宇宙情报局
