分析微信H5页面前端开发几个兼容性坑

这篇文章主要讲解了“分析微信H5页面前端开发几个兼容性坑”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“分析微信H5页面前端开发几个兼容性坑”吧！

目前创新互联已为千余家的企业提供了网站建设、域名、网页空间、网站托管、企业网站设计、绵阳网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

1、ios端兼容input光标高度

问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上

当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。

出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部

解决办法：高度height和行高line-height内容用padding撑开

例如：       

.content{              float: left;              box-sizing: border-box;              height: 88px;              width: calc(100% - 240px);              .content-input{                display: block;                box-sizing: border-box;                width: 100%;                color: #333333;                font-size: 28px;                //line-height: 88px;                padding-top: 20px;                padding-bottom: 20px;              }             }

2、ios端微信h6页面上下滑动时卡顿、页面缺失

问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。

出现原因分析：

笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。【有待考证】

解决办法：只需要在公共样式加入下面这行代码

*{    -webkit-overflow-scrolling: touch;  }

But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点，那么该节点的显示会错乱，当然还有会有其他的一些bug。

拓展知识：-webkit-overflow-scrolling:touch是什么？

MDN上是这样定义的：

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

3、ios键盘唤起，键盘收起以后页面不归位

问题详情描述：

输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑

出现原因分析：

固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件

解决办法：

    投·被保险人姓名