详解h5页面在不同ios设备上的问题总结

网页制作 2024/12/22 佚名

3 2 1

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

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

h5,ios设备,不同ios设备

标签：

h5,ios设备,不同ios设备

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

千金楼资源网 Copyright www.htabc.com

评论“详解h5页面在不同ios设备上的问题总结”

详解h5页面在不同ios设备上的问题总结

暂无“详解h5页面在不同ios设备上的问题总结”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

详解h5页面在不同ios设备上的问题总结

h5,ios设备,不同ios设备

手把手教你实现一个canvas智绘画板的方法

小程序瀑布流解决左右两边高度差距过大的问题

评论“详解h5页面在不同ios设备上的问题总结”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接