详解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新增颜色表示方式分享
Apr 15 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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自动适应范围的分页代码
2008/08/05 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
window.open的功能全解析
2006/10/10 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
jQuery树形控件zTree使用小结
2016/08/02 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python正则表达式和元字符详解
2018/11/29 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
python代码实现图书管理系统
2020/11/30 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
文明市民先进事迹
2014/05/15 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
干部作风建设心得体会
2014/10/22 职场文书
科技馆观后感
2015/06/08 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
升学宴家长答谢词
2015/09/29 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server