h5开发在ios浏览器遇到的坑

1.click事件；

要在css中加上cursor: pointer;ios的点击才有效

2.margin-bottom问题；

在ios上，最后一个元素加margin-bottom无效。

3.时间转化问题

由时间转时间戳时

new Date('2019-07-3 11:22:32').getTime(); //苹果显示NAN

在ios上 new Date("2019-07-3 11:22:32".replace(/-/g,'/')).getTime(); //问题解决

苹果不识别-。要写成 /

4.position: fixed中的input框聚焦软键盘弹出，IOS下会有光标错位问题

// IOS 9 实测有效
html, body {
  -webkit-overflow-scroll: touch;
}

5.滚动穿透问题

（实测的此方法兼容性最好，兼容IOS，实测iphone X也有效）

body.overflowHide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

弹窗展开时给body增加，同时记录

const top = window.scrollY;

动态设置top为-${top}px ，弹窗收起时移除该class，设置top为0，调用window.scrollTo(0, top)恢复原滚动位置

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3988