详解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 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 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五种设计模式小结
2011/03/23 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
使用PHP编写发红包程序
2015/07/22 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python中常见的数据类型小结
2015/08/29 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
yy结婚证婚词
2014/01/10 职场文书
厨房管理计划书
2014/04/27 职场文书
技术入股合作协议书
2014/10/07 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
dubbo服务整合zipkin详解
2021/07/26 Java/Android
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android