踩过的微信H5的坑

1. ISO的input光标高度问题

问题:IOS的input框高度会默认占满父盒子的高度,导致光标也会撑满整个input框

解决:父盒子使用上下padding撑开,不使用行高(line-height)居中

2. ISO微信h5页面上下滑动时卡顿,页面缺失

问题:如果页面高度超出了一屏,滑动页面就会出现卡顿,有时会有页面显示不全的情况

分析:苹果微信浏览器内核使用自带的safari,需要overflow-scrolling开启回弹效果

解决:*{ -webkit-overflow-scrolling: touch }

注意:如果页面中有绝对定位的节点,该节点的显示会错乱

3. ISO键盘唤起,键盘收起以后页面不回位

问题:输入内容时,键盘弹出,页面内容整体上移,但是键盘收起,页面内容无法归位

分析:input聚焦时,弹出的软键盘占位,失去焦点时软键盘消失,但还是占位的,导致input框不能再次输入

解决:监听input的blur方法,失去焦点时,用js滚动页面

4. Android弹出的软键盘遮盖文本框

问题:安卓微信h5页面太长时弹出软键盘后会挡住input输入框

解决:给input和textarea标签添加focus事件,聚焦时延时滚动

5. ISO去除input默认阴影失效

问题:一般去除input阴影我们可以使用outline: none; 
     也可以使用border: 0;但是我们有时候需要border的情况下,
     只能使用outline: none; 安卓可以生效,IOS发现阴影还在?

解决:使用-webkit-appearance: none; 即可去除input默认阴影

踩过的微信H5的坑

上一篇:Linux 常用命令


下一篇:Linux基础——安装以及常用命令