最近在写嵌入到小程序 webview 的一个 h5 页面, 是一个文章评论的功能, 这个过程中, 遇到很多兼容性的问题, 在不同机型上的表现也很不一致, 所以总结了以下这些问题, 记录下来, 以便以后查看
1, 日期问题
对于 yyyy-mm-dd hh:mm:ss 这种格式在 iOS 系统不识别
时间格式化的时候, 在浏览器端处理好好的, 到了手机端, 就变成 NAN, 或者 null, 这种情况, 是 iOS 系统不能转化这种类型的时间.
`let date = new Date('2019-02-28 18:33:24'); // null`
解决方案是, 转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了
replace(/\-/g, "/")
2, 键盘收起, 页面卡住, 不回落
ios12 上, 发现键盘收起的时候, 页面会卡主, 留下底部一片空白, 稍微动一下页面, 就会恢复.
这种问题, 在网上查了很多解决方案, 大致是在 blur 事件中, 让页面滚动一下
Windows.scrollTo(0, scroll);
但是有一个很严重的问题: 如果页面上有按钮需要操作 , 例如, 评论的输入框 + 发布按钮, 输入完文字, 点击 "发布", 触发 click 事件的时候, 会导致页面先触发 blur 事件, 键盘回落, 然后一切就结束了.... 按钮点击没有起任何作用.
解决方案: 把 click 事件更换成 ontouchstart 可以解决这个问题. ontouchstart 事件优于 click 事件触发
3,ios12 在微信小程序的 webview, 键盘收回, 页面底部会留白
这个问题怀疑是页面的 scroll 设置了 auto 导致的
解决方案: 滚动一下页面, 请参考链接, 代码有效. blog.csdn.NET/qq_23370345...
4,iPhone fix 失效, 导致一些机器上 textarea 光标偏移
解决方案: 所有兄弟元素变成 absolute, 父元素 overflow:auto;
父元素:
- height: 100vh;
- position: relative;
- overflow: auto;
兄弟元素:
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- overflow-x: visible;
- overflow-y: auto;
- padding-bottom: 10px;
- z-index: 1;
5, 键盘遮挡输入框
输入框如果使用了 fixed 固定在底部, 键盘顶起的时候, iPhone 上 fixed 会失效, 导致页面滚动输入框会随着页面滚动, 并且在部分机型上, 输入框偶尔会被键盘遮挡, 这种偶现的问题, 很不友好
解决方案: 放弃使用 fixed 布局, 页面如果有滚动, 也放弃 absolute, 如果强行要使用 absolute, 请参考上一条光标偏移
建议使用 flex 布局, 兼容性会得到解决.
当然, 如果遇到以上这些问题, 说明产品设计就很不合理, 如果必要的话, 还是要更换设计, 改成 input 不需要被键盘顶起的设计, 这些兼容性的解决方案, 也不并不能完美的解决所有机型的问题.
来源: https://juejin.im/post/5c77b7dbe51d451d4763355d