codecamp

CSS

移动浏览器与桌面浏览器对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很糟糕,至少是早期的很糟糕。

视口(viewport)
触摸和指针事件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
CSS

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }