如果在 iOS Safari 15 上查看，如何將 position 元素絕對底部？

Question

我的屏幕高度為 100vh，元素位於視口的底角。

如果用戶查看最新的 iOS Safari，默認情況下搜索欄會覆蓋該元素。

有沒有辦法根據這個特定的瀏覽器調整 position？

Answer 1

您可以使用env(safe-area-inset-bottom) ，它代表 iOS 上的搜索欄。默認設置為 0。

閱讀更多： https://developer.mozilla.org/en-US/docs/Web/CSS/env

body {
     padding-bottom: env(safe-area-inset-bottom);
}

Answer 2

您希望瀏覽器動態適應渲染空間。 為此，您應該使用dvh單位而不是vh單位。

每當瀏覽器渲染空間更新時，該單位都會更新（您擁有所有基本視口單位的等效項： dvw 、 dvmin 、 dvmax ）。