详解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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 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
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php实现word转html的方法
2016/01/22 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
laravel5.6实现数值转换
2019/10/23 PHP
异步加载script的代码
2011/01/12 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jquery实现动态画圆
2014/12/04 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python基础梳理(一)(推荐)
2019/04/06 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
观后感的写法
2015/06/19 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript