CSS
2018-02-24 15:46 更新
移动浏览器与桌面浏览器对CSS支持的差异:
- 桌面用例在移动端不存在。如hover。
- 视口不统一。如单位vw和vh。
- 对独立可滚动层的需求在移动设备上更难实现。如background-attachment。
- 硬件限制。在老设备上transition和animation可能无法使用。
以下属性都不建议在移动Web上使用。
position:fixed
此属性标准没有支持缩放。
overflow:auto
多个可滚动层体验不好,并且移动上默认不显示滚动条会漏掉内容。
-webkit-overflow-scrolling:auto
:平滑滚动。
background-attachment
三个可选值scroll、fixed、local。会创建过多的可滚动层,影响性能。
尺寸单位vw和vh
非常冷门的单位,本来也没什么人用,这里就不多说了。
:active和:hover
:hover
在桌面浏览器用的过多,因此移动设备必须支持,但实际上在用户触摸元素时触发,引起事件级联。
:active
相对支持的不好,可以和:focus
同时使用,后者支持的较好。
transition和animation
实际上浏览器支持的很好,但这两个属性会用到GPU,而移动设备GPU很糟糕,至少是早期的很糟糕。
以上内容是否对您有帮助:
更多建议: