详解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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 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
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js数组操作学习总结
2013/11/04 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
JavaScript中Function详解
2015/02/27 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
2014年车间工作总结
2014/11/21 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
冰雪公主观后感
2015/06/16 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL