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;
}

广州VI设计公司https://www.houdianzi.com

5.滚动穿透问题

(实测的此方法兼容性最好,兼容IOS,实测iphone X也有效)

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

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

const top = window.scrollY;

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

原文地址:https://www.cnblogs.com/qianxiaox/p/14035594.html