1.键盘遮挡输入框
H5 无法控制原生输入法，各种机型对虚拟键盘弹起行为的处理机制不一，我们的测试同学非常贴心，与键盘有关的 bug 各种场景一个个算，一共有十来个，表象其实只有一个：键盘遮挡输入框。
IM 输入框通常都被设计为吸附于底部，虚拟键盘弹起 输入框要随着上移，安卓还好，ios 对 fixed 的处理有点异常，这个问题网上已经有成功的解决方案了，设置一个定时器，不断的去 scrollIntoView (element的原生方法，元素顶部与视口对齐)
iphoneX 在虚拟键盘弹起的时候又有了另外的处理机制，只得针对具体机型，具体系统版本做兼容,无非多写几行if else
bug，在不影响正常使用的情况下，尽力兼容就可以了，我自认为已经做到很好，心想绝逼能兼容 90%以上的场景，但并没有令测试满意，可以多试试别人家的输入框，大都有瑕疵，想做到完美，这真是个业界难题。
2.overflow: auto; IOS手机滚动卡顿
3.a标签或者button标签等，点击后会有蓝色边框；去掉难看的点击的高亮效果
* {
outline: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
4. calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以移动端不建议使用calc
5.. 微信浏览器中跳转新网页：window.locaition.href 无效；
var nextPage = document.createElement("a");
nextPage.setAttribute('href','http://www.baidu.com');
nextPage.click();
6.
iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。
io系统下面当软键盘弹起来的时候fixed定位的元素将会失效，，当页面超过一屏滚动的时候，失效的fixed元素就会跟随滚动了，
<body class="layout-fixed">
<!-- fixed定位的头部 -->
<header>
</header>
<!-- 可以滚动的区域 -->
<main>
<!-- 内容在这里... -->
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
margin-top: 50px;
margin-bottom: 34px;
height: 2000px
}
fixed元素的父级不出现滚动条即可，
<body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header>
</header>
<!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
}
main .content {
height: 2000px;
}
ios11的safari下无效
其他的一些细节处理
focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。
iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是 iOS 下的一个坑吧。
fixed 定位会被工具栏遮挡。解决办法也比较简单粗暴——适配不同的浏览器，调整 fixed 元素距离底部的距离。
header 和 footer 元素的 touchmove 事件禁止，以防止滚动在上面触发了部分浏览器全屏模式切换，而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。
View 一起拖拽走，导致页面的"露底"。
h5兼容性问题
ios和安卓手机兼容的问题，分享给大家，希望之后能不掉坑，及时解决问题：
1、h5 监听软键盘弹起、收起
1）、在ios中软键盘弹起时，仅会引起body的scrollTop值改变，可以通过输入框的获取焦点情况来做判断。因此监听的是输入框的得到焦点和失去焦点事件。
2)、而在android中存在主动收起键盘后，输入框并没有失焦；
android在软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；
react为例子：
componentDidMount(){
//初始化的高度
this.setState({
windowHeight:document.documentElement.clientHeight ||document.body.clientHeight
});
window.addEventListener('resize', this.handleResize);
}
handleResize() { var winHeight = this.state.windowHeight;
var curWinHeight = document.documentElement.clientHeight ||document.body.clientHeight;
if(curWinHeight-0<winHeight-0){
//当软键盘弹起，在此处操作
}else{
//当软键盘收起，在此处操作
}
},
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize)
}
2、ios系统弹起软键盘时，固定定位失效，这是所有ios系统的一个bug，出现此问题时就利用上面监听输入框获取焦点和失去焦点的方法改变样式
3、弹框的宽度最好是偶数，使用rem，不能使用百分比，因为百分比在不同的手机上可能会计算出带有小数点的像素，这会导致弹框里的字出现锯齿；其次在动画重叠的情况下也可能出现锯齿行为，在body里加样式-webkit-font-smoothing: antialiased; 就可以实现抗锯齿。
4、小米手机部分系统不支持font-weight:600设置的粗体字，改成font-weight:bold 即可
5、部分低版本手机不支持es6的语法，如果用es6语法在低版本的手机上可能会出现空白页
es6降级处理
6、解决手机滚动卡顿问题：带滚动条的dom上加-webkit-overflow-scrolling: touch;
7、解决移动端、苹果端、安卓端点击视频自动全屏问题的方法是playsinline
<video src="1.mp4" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>
8、iphoneX样式适配
1）、如果想全屏覆盖，html里面请使用
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
2）、样式适配
iphoneX、iphoneXs（设备屏幕可见宽度为375px， 可见高度为812px，设备像素比为3）
iphone Xs Max（设备屏幕可见宽度为414px， 可见高度为896px，设备像素比为3）
iphone XR（设备屏幕可见宽度为414px， 可见高度为896px，设备像素比为2）
iphoneX为例）举例如下：
@media only screen and (device-width: 375px) and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
.page-bottom{
padding-bottom:在原来的基础上+34px
}
}
//横屏@media all and (orientation : landscape) {}
//竖屏@media all and (orientation : portrait){ }
(3)、js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就可以这样做
function isIPhoneX(fn){
var u = navigator.userAgent;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isIOS) {
if (window.screen.height == 812 && window.screen.width == 375 &&
window.devicePixelRatio === 3){
//是iphoneX
}else{
//不是iphoneX
}
}
}
Safari浏览器的无痕模式会将localstorage和sessionstorage全部无效
