文章目录
  1. 1. 常见类别总结
  2. 2. 最易产生 bug 情形
  3. 3. 问题列表
    1. 3.1. position: fixed 布局相关
    2. 3.2. overflow: scroll相关
    3. 3.3. input 键盘类型相关
    4. 3.4. 其他

近一年陆续开发了一些 iOS 上的H5页面,总结一下遇到的兼容性问题。

常见类别总结

  1. iOS 对 fixed 布局支持不佳, 容易产生元素位置和光标位置异常
  2. overflow 为 scroll 的容器内 放置 input 或 textarea元素 产生光标消失和列表异常滚动问题
  3. iOS 和 Android 对 input 的键盘支持不一致

最易产生 bug 情形

input放置在一个 position: fixed 或者 overflow:scroll 的元素内部

问题列表

position: fixed 布局相关

input 标签放置在 fixed 布局的容器内部,产生光标问题

overflow: scroll相关

input 元素放在 overflow: scroll的元素内部, 产生光标错位

input 键盘类型相关

使用 input 的 pattern 显示九宫格键盘

其他

iOS 不支持 background-attachment: fixed

文章目录
  1. 1. 常见类别总结
  2. 2. 最易产生 bug 情形
  3. 3. 问题列表
    1. 3.1. position: fixed 布局相关
    2. 3.2. overflow: scroll相关
    3. 3.3. input 键盘类型相关
    4. 3.4. 其他