详解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让网页设计提升到下一个高度
Aug 14 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 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垃圾回收机制简单说明
2010/07/22 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
super()与this()的区别
2016/01/17 面试题
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
如何理解委托
2012/01/06 面试题
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
给全校老师的建议书
2014/03/13 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
六一亲子活动感想
2015/08/07 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书