设备差异
不同设备之间存在各种差异，包括屏幕、交互方式、API支持等。
主要设备差异
| 差异类型 | iOS | Android | PC |
|---|---|---|---|
| 浏览器内核 | WebKit | Blink/WebKit | Blink/Gecko |
| 点击延迟 | 300ms | 无(现代) | 无 |
| 滚动行为 | 弹性滚动 | 原生滚动 | 原生滚动 |
| 字体渲染 | -webkit-optimize | 标准 | 标准 |
| 视频全屏 | webkit | 标准 | 标准 |
| localStorage | 有限制 | 有限制 | 无限制 |
| position:fixed | 有问题 | 部分支持 | 支持 |
CSS兼容性问题
| CSS属性 | 兼容问题 | 解决方案 |
|---|---|---|
| border-radius | iOS早期版本圆角溢出 | overflow:hidden |
| flexbox | 旧版Android需要前缀 | display:-webkit-flex |
| position:sticky | iOS需要-webkit-前缀 | -webkit-position:sticky |
| placeholder | 需要::-webkit-input-placeholder | 同时添加两个伪类 |
| input类型 | 部分类型旧浏览器不支持 | 功能检测或降级 |