css - 如何在 Safari/WebKit 中为 2018/2020+ iPad Pro iOS "home-screen-bar"/"swipe-up-bar"腾出空间？

Question

(我最初的问题是问 iPhone X 和 iPad Pro(2018 及更新版本)设备底部边缘的栏的正式名称是什么？我已经搜索了“ipad pro 任务切换栏”的所有变体“ipad pro 2018 home bar”等等，我在 Apple 的网站上找不到任何关于它的官方文档——不知道设备上最重要的 UI 组件的名称真是令人抓狂!)

但我真正的问题是:

WebKit 是否公开任何方式让网页自动调整其边距/填充以适应此任务切换栏？

我知道 WebKit 有 @-webkit-viewport功能，并具有 <meta name="viewport" content="viewport-fit=cover" /> ，但我知道这是为了调整视口(viewport)的大小以考虑 iPhone X 的“缺口”，并执行同样具有显示切口功能的其他 Android 设备 - 我在 Apple 的 Safari 开发者网站上找不到关于此功能如何实现的任何提及用于 iPad Pro 的白条。

在我的例子中，我的问题是我的应用程序中使用的图像编辑器组件(我将其加载到无边界 <iframe> 和 height: 100vh; width: 100vw; 中)具有沿着视口(viewport)底部边缘运行的按钮，这些按钮更难使用在 iPad Pro 上，因为有白色条。这是一张照片:

快速修复是在页面底部添加一些固定的填充以强制按钮稍微向上，但这不是一个长期的解决方案并且不适用于其他设备 - 这意味着UI 在桌面和其他设备上会有奇怪的间距。

Answer 1

在您的 CSS 中使用 safe-area-inset-bottom 为栏保留空间。

例如:margin-bottom: env(safe-area-inset-bottom)