CSS

移動(dòng)瀏覽器與桌面瀏覽器對CSS支持的差異：

• 桌面用例在移動(dòng)端不存在。如hover。
• 視口不統(tǒng)一。如單位vw和vh。
• 對獨(dú)立可滾動(dòng)層的需求在移動(dòng)設(shè)備上更難實(shí)現(xiàn)。如background-attachment。
• 硬件限制。在老設(shè)備上transition和animation可能無法使用。

以下屬性都不建議在移動(dòng)Web上使用。

position:fixed

此屬性標(biāo)準(zhǔn)沒有支持縮放。

overflow:auto

多個(gè)可滾動(dòng)層體驗(yàn)不好，并且移動(dòng)上默認(rèn)不顯示滾動(dòng)條會(huì)漏掉內(nèi)容。

-webkit-overflow-scrolling:auto：平滑滾動(dòng)。

background-attachment

三個(gè)可選值scroll、fixed、local。會(huì)創(chuàng)建過多的可滾動(dòng)層，影響性能。

尺寸單位vw和vh

非常冷門的單位，本來也沒什么人用，這里就不多說了。

:active和:hover

:hover在桌面瀏覽器用的過多，因此移動(dòng)設(shè)備必須支持，但實(shí)際上在用戶觸摸元素時(shí)觸發(fā)，引起事件級聯(lián)。

:active相對支持的不好，可以和:focus同時(shí)使用，后者支持的較好。

transition和animation

實(shí)際上瀏覽器支持的很好，但這兩個(gè)屬性會(huì)用到GPU，而移動(dòng)設(shè)備GPU很糟糕，至少是早期的很糟糕。