env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的變量，用于獲取設(shè)備底部和頂部安全區(qū)域的大小。所謂的安全區(qū)域就是指在iPhone X及以上的設(shè)備中，為避免被屏幕的“劉?！焙汀癏ome Indicator”所遮擋或者覆蓋的有效區(qū)域區(qū)域，以確保內(nèi)容在安全區(qū)域內(nèi)顯示。

這個(gè)變量最好和padding或者h(yuǎn)eight（可結(jié)合calc一起）結(jié)合使用，會(huì)達(dá)到最好的效果。

• 和padding的結(jié)合：

如果想讓安全區(qū)域再靠上20px，則結(jié)合calc使用如下：

• 和height的結(jié)合：

以上寫法貌似在兼容iphoneX的工程上宣告結(jié)束了...然而...在某些機(jī)型上識(shí)別不出env(safe-area-inset-bottom)和env(safe-area-inset-top)，導(dǎo)致高度等失效，那如何做呢？

需要再做一次兼容，兼容某些不識(shí)別這些變量的機(jī)型。拿和height結(jié)合舉例說(shuō)明，可做如下兼容：

如果識(shí)別這兩個(gè)變量，則執(zhí)行第二句，覆蓋第一句；如果不識(shí)別這兩個(gè)變量呢，則不識(shí)別第二句，執(zhí)行第一句。這就是一個(gè)完美的兼容寫法！

你學(xué)費(fèi)了嗎？：）