苹果ios浏览器踩过的坑

时间 2019-11-25

标签苹果 ios 浏览器栏目 iOS 繁體版

原文原文链接

1.click事件；css

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

2.margin-bottom问题；ios

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

3.时间转化问题iphone

由时间转时间戳时ide

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

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

苹果不识别-。要写成 /htm

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增长class="overflowHide"，同时记录

const top = window.scrollY;

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