任性的蘋果爸爸—— iOS 11.2 的一個 CSS 坑

今天我們突然發現某個頁面的 Safe Area 不對了，於是查了一下發現 官方文檔 突然多了這麼一句話：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

這意味著之前使用的 constant 在 iOS 11.2 不能使用了。

如何修復？

正如文字中所說，我們可以利用 CSS fallback 來修復，像這樣：

.header {n padding-top: 20px; /* for iOS 10 */n padding-top: constant(safe-area-inset-top); /* for iOS <11.2 */n padding-top: env(safe-area-inset-top); /* for iOS >=11.2 */n}n

（溫馨提示：順序不能變）

推薦閱讀：