头图

你一定踩过的微信H5的坑

叫我欧文就好

1. IOS的input光标高度问题

问题:IOS的input框高度会默认占满父盒子的高度,导致光标也会撑满整个input框
解决:父盒子使用上下padding撑开,不使用行高(line-height)居中

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

问题:如果页面高度超出了一屏,滑动页面就会出现卡顿,有时会有页面显示不全的情况
分析:苹果微信浏览器内核使用自带的safari,需要overflow-scrolling开启回弹效果
解决:*{ -webkit-overflow-scrolling: touch }
注意:如果页面中有绝对定位的节点,该节点的显示会错乱

3.IOS键盘唤起,键盘收起以后页面不归位

问题: 输入内容时,键盘弹出,页面内容整体上移,但是键盘收起,页面内容无法归位
分析:input聚焦时,弹出的软键盘占位,失去焦点时软键盘消失,但还是占位的,导致input框不能再次输入
解决: 监听input的blur方法,失去焦点时,用js滚动页面

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

问题:安卓微信h5页面太长时弹出软键盘后会挡住input输入框
解决:给input和textarea标签添加focus事件,聚焦时延时滚动

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

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

Kyrie前端之路
记录一个前端菜鸟的进阶之路...

记录一个前端菜鸟的进阶之路...

234 声望
3 粉丝
0 条评论
你知道吗?

记录一个前端菜鸟的进阶之路...

234 声望
3 粉丝
宣传栏