移动端h5的项目，大大小小也做了一些，遇到过不少问题，也踩过很多的坑，在这里总结一下，以备不时之需。
一、vue列表渲染track-by=”$index”
问题描述：
默认一般情况很少使用这个属性，但是在做评论列表时，需要实现一个提交即显示到列表的效果，所有采用了手动往列表数组中添加一条数组，而没有请求接口。如果不添加这个属性，添加的数据会替换原有位置的数据，而不会往数组中新增一个数据，Vue 不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素。
属性说明：
无track-by情况：数据修改时，无论值是否被修改，dom都被重新渲染（控制台可以看到）
加入track-by属性：数据修改时，不变数据所在的dom不被重新渲染，已改变的数据所在dom才被重新渲染
| 注意：track-by="$index"是vue 1.x的属性，在vue 2中是在渲染列表时添加key属性，效果一样。这个问题其实官方文档中有说明，自己当时没认真看o(╥﹏╥)o |
二、ios在键盘弹起后导致fixed定位失效问题
问题描述：
一般在留言列表一类的页面出现，当留言比较多，而且有分页的时候，当输入框获取焦点，弹出系统键盘，webview高度重新计算，会导致输入框的fixed定位失效，导致输入框可以向上滑动。属ios兼容性问题，安卓不会出现。
解决方案：
当输入法弹出时，给外层的包裹层添加
height:100%;
overflow:hidden;
即可解决该问题。
三、识别输入框中的换行
问题描述：
javascript获取到textarea文本框中的字符串中，如果包含有回车换行符，在字符串中表现为“\n”。
解决方案：
comment.replace(/\n/g,"<br />")
将内容中的‘\n’替换成为<br>
四、https的新页面路由地址，在支付宝和uc浏览器当中无法识别
问题描述：
在用vue开发一个扫码访问的h5的时候，在支付宝和uc浏览器当中无法识别新页面的路由地址
解决方案：
传到正式环境之后就可以扫码访问了
五、不定宽水平居中问题
解决方案：
display:table; //重点就是这个属性，这个样式会告知浏览器当前元素的宽度，采用最小的宽度，不是默认全宽
margin:0 auto;
六、安卓手机上文字无法垂直居中
问题描述：
rem的值为奇数时，会导致样式出错，文字无法垂直居中问题（font-size、line-height、padding等属性）
解决方案：
使用rem单位时尽量使用偶数，如0.6rem、0.8rem等
七、ios11中，内嵌在app里的h5页面，快速滑动出现空白卡顿
问题描述：
app里面有一个内嵌的h5页面，页面已经加载完成，滑动也没有分页，上下来回滑动的过程中，当被遮住的部分重现滑出来的时候会空白，然后重新渲染出来，闪一下，但是同样的h5页面在微信或外部浏览器打开则没有这个问题
解决方案：
搜索了一圈发现我们ios客户端使用的是UIWebView，而换成WKWebView后这个问题就好了
八、iPhoneX适配
// 1.viewport meta 标签增加属性viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
// 2.body元素增加样式
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有fixed底部的元素，也增加上面样式
xxx {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: #fff; // 记得添加background-color，不然会出现透明镂空的情况
}