• 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-04-16
  • 体彩11选5中奖规则:详解h5页面在不同ios设备上的问题总结

      发布时间:2019-03-01 15:33:45   作者:啦粑吧小魔仙   我要评论

    这篇文章主要介绍了详解h5页面在不同ios设备上的问题总结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    最近在写嵌入到小程序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不需要被键盘顶起的设计,这些兼容性的解决方案,也不并不能完美的解决所有机型的问题。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    相关文章

    最新评论

  • 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-04-16
  • 时时彩稳赚 okooo澳客网出什么事了 快乐时时彩开奖号码 搜狐彩票图表数据 体彩排列三走势图 南国七星彩规律图长条 2008年排三开奖分布图 七星彩走势图最近500 天津快乐十分 咱们结婚吧篮彩平 山东群英会开奖号 辽宁快乐12开奖结果 舟山飞鱼彩票开奖号码 体育彩票走势图31选7 中国福利彩票双色球 重庆时时彩跨度介绍