h5获取ios系统版本(详解h5页面在不同ios设备上的问题总结)
h5获取ios系统版本
详解h5页面在不同ios设备上的问题总结最近在写嵌入到小程序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事件中,让页面滚动一下
window.scrollTo(0, scroll);
但是有一个很严重的问题:如果页面上有按钮需要操作 ,例如,评论的输入框+发布按钮,输入完文字,点击“发布”,触发click事件的时候,会导致页面先触发blur事件,键盘回落,然后一切就结束了。。。。按钮点击没有起任何作用。
解决方案: 把click事件更换成ontouchstart 可以解决这个问题。 ontouchstart 事件优于click事件触发
3、ios12在微信小程序的webview,键盘收回,页面底部会留白
这个问题怀疑是页面的scroll设置了auto导致的
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不需要被键盘顶起的设计,这些兼容性的解决方案,也不并不能完美的解决所有机型的问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- php 支付系统(php 实现银联商务H5支付的示例代码)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- h5微信手机端debug模式(iOS微信H5页面橡皮回弹效果的踩坑记录)
- h5前端入门(前端H5 Video常见使用场景简介)
- h5开发app缺点(H5唤醒APP实现方法及注意点总结)
- h5实现唤起本地app(h5页面唤起app如果没安装就跳转下载iOS和Android)
- h5禁用返回键(可能这些是你想要的H5软键盘兼容方案小结)
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- h5本地存储对比(H5离线存储Manifest原理及使用)
- pythonssl版本(解决Python 使用h5py加载文件,看不到keys的问题)
- python中mat文件怎么读(Python第三方库h5py_读取mat文件并显示值的方法)
- h5支付接口第四方支付(h5移动端调用支付宝、微信支付的实现)
- h5页面快速制作方法(h5网页水印SDK的实现代码示例)
- h5页面强制关注微信公众号(Html5页面获取微信公众号的openid的方法)
- h5获取ios系统版本(详解h5页面在不同ios设备上的问题总结)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
- 鱼竿 夏钓短,冬钓长 ,一定是这样 认清优缺点在选竿(鱼竿夏钓短冬钓长)
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓(鲢鳙钓底还是钓浮)
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场(入秋后的第二场苹果发布会来了)
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel(苹果正式发布自研芯片M1)
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
热门推荐
- nginx结构图解(详解Nginx 工作原理)
- dedecms如何使用标签(dedecms 移动文章后,原来生成的HTML依然存在解决方法)
- C#中ToString()常见的格式
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- linux怎么设置php代码(linux Cron定时执行带参数的PHP代码)
- ftp可能出现的问题(FTP长时间不操作假死的原因及解决)
- php语言程序设计基础面向对象(PHP面向对象程序设计之对象的遍历操作示例)
- 云计算是一种服务的概念(云服务的意思,云服务是云计算吗?)
- python中if语句应学会什么(Python基础之条件控制操作示例if语句)
- python扫描服务器端口(Python实现的对本地host127.0.0.1主机进行扫描端口功能示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9