详解h5页面在不同ios设备上的问题总结


Posted in HTML / CSS onMarch 01, 2019

最近在写嵌入到小程序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不需要被键盘顶起的设计,这些兼容性的解决方案,也不并不能完美的解决所有机型的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 #HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 #HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 #HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 #HTML / CSS
Canvas系列之滤镜效果
Feb 12 #HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 #HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 #HTML / CSS
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
js不是基础的基础
2006/12/24 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
志愿者活动总结范文
2014/04/26 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
荆州古城导游词
2015/02/06 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
合同补充协议书
2016/03/24 职场文书