兼容 踩坑

IOS

• 输入框设置 readonly 后，依旧底部弹出“完成” 解决方法：

unselectable="on" // 取消光标出现

onfocus="this.blur()" // 防止出现 “完成”

• 搜索输入框，调出软键盘搜索按钮 解决方法：

input 设置 type="search" 后还需要在外层包裹一层 form 标签 (注意：action 属性需要有)

<form action="/">
     <input type="search">
</form>

• ios 11 弹出软键盘后收起导致错位问题 解决方法：

window.addEventListener('focusout', () => {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
  }, 1);
});

安卓 Android

• 0.5 px 边框，安卓有些手机显示不全(ios 不要用 3d) 解决方法：

::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 200%;
    width: 200%;
    box-sizing: border-box;
    border-radius: inherit;
    border: 1px solid rgba(216, 216, 216, 1);
    transform: scale3d(0.5, 0.5,1); // 重点，使用 '3d'
    transform-origin: 0 0;
 }

样式问题

• 小范围 overflow-x: auto 无效，可能需要添加 white-space: nowrap;

某些机型、某些组件

• input type='number' 有些机型或者在某些组件无效（比如：vant 某些安卓机下，如海信），出来的还是字母键盘。如果不强制，可以改成 type='digit'。