iOS 兼容性问题

输入框光标问题

<input type="tel" placeholder="请输入手机号" maxlength="11">

* {
  margin: 0;
  padding: 0;
  border: 0;
}
input {
  font-size: 16px;
  line-height: 36px;
}

1
2
3
4
5
6
7
8
9

在 iOS 下，当input聚焦后（但还未输入），光标的长度为input的line-height的高度，而当输入内容后，光标的长度改变为从input顶部到文字底部的距离，导致输入前后光标长度不统一。

解决方案是，

input {
  height: 26px; /** 最好加上 height **/
  padding: 5px 0; /** 也可以用 margin **/
  font-size: 16px;
  line-height: 26px;
}

1
2
3
4
5
6

添加padding或margin，即可解决。

此外，经测试，在 iOS 和部分 Android 浏览器上，若是不添加固定的height，输入内容前后input会有细微的高度变化，因此最好加上height。

iOS Safari 里，需要在按钮元素或body/html上绑定一个touchstart事件，才能激活:active状态。

document.body.addEventListener('touchstart', function () {});

解决方法：将 flex item 元素也变成 flexbox 元素。

有一些 iOS 客户端内会使用 UIWebView，在 UIWebView 里滚动页面时，到导致计时器、动画等等停止。

有两种方式解决这个问题：

当使用better-scroll等类似滚动库时，通常会使用transform来做滚动动画的过渡，但是在transform元素下的fixed定位的子元素将以transform元素为包含块进行定位，并失去固定效果。因此需要注意不要将fixed定位的元素放在滚动元素之下。