我怎样才能在 Safari/WebKit 中为 2018/2020+ iPad Pro 的 iOS "home-screen-bar" / "swipe-up-bar" 腾出空间？
How can I make room for the 2018/2020+ iPad Pro's iOS "home-screen-bar" / "swipe-up-bar" in Safari/WebKit?
（我最初的问题是问 iPhone X 和 iPad Pro（2018 及更高版本）设备底部边缘的栏的官方名称是什么？我用谷歌搜索了所有"ipad pro task switcher bar" "ipad pro 2018 home bar" 等的变体，我在 Apple 的网站上找不到任何关于它的官方文件 - 不知道设备上最重要的 UI 组件的名称真是令人抓狂！）
但我真正的问题是：
WebKit 是否公开任何方式让网页自动将其 margins/padding 调整为此任务切换栏的帐户？
我知道 WebKit 具有 @-webkit-viewport 功能，并且具有 <meta name="viewport" content="viewport-fit=cover" />，但我知道这是为了调整视口的大小以考虑 iPhone X 的 "notch" 和做同样的其他 Android 设备也具有显示切口 - 我在 Apple 的 Safari 开发者网站上找不到任何关于如何将此功能用于 iPad Pro 的白条的提及。
在我的例子中，我的问题是在我的应用程序中使用的图像编辑器组件（我将其加载到 <iframe> 和 height: 100vh; width: 100vw; 中）具有沿 运行 的按钮视口的底部边缘由于白色条而更难在 iPad Pro 上使用。这是一张照片：
快速修复是在页面底部添加一些固定的填充以强制按钮稍微向上，但这不是一个长期的解决方案并且不适用于其他设备 - 而且它'这意味着 UI 在桌面和其他设备上会有奇怪的间距。
在您的 CSS 中使用 safe-area-inset-bottom 为栏保留 space。
例如：margin-bottom: env(safe-area-inset-bottom)
（我最初的问题是问 iPhone X 和 iPad Pro（2018 及更高版本）设备底部边缘的栏的官方名称是什么？我用谷歌搜索了所有"ipad pro task switcher bar" "ipad pro 2018 home bar" 等的变体，我在 Apple 的网站上找不到任何关于它的官方文件 - 不知道设备上最重要的 UI 组件的名称真是令人抓狂！）
但我真正的问题是：
WebKit 是否公开任何方式让网页自动将其 margins/padding 调整为此任务切换栏的帐户？
我知道 WebKit 具有 @-webkit-viewport 功能，并且具有 <meta name="viewport" content="viewport-fit=cover" />，但我知道这是为了调整视口的大小以考虑 iPhone X 的 "notch" 和做同样的其他 Android 设备也具有显示切口 - 我在 Apple 的 Safari 开发者网站上找不到任何关于如何将此功能用于 iPad Pro 的白条的提及。
在我的例子中，我的问题是在我的应用程序中使用的图像编辑器组件（我将其加载到 <iframe> 和 height: 100vh; width: 100vw; 中）具有沿 运行 的按钮视口的底部边缘由于白色条而更难在 iPad Pro 上使用。这是一张照片：
快速修复是在页面底部添加一些固定的填充以强制按钮稍微向上，但这不是一个长期的解决方案并且不适用于其他设备 - 而且它'这意味着 UI 在桌面和其他设备上会有奇怪的间距。
在您的 CSS 中使用 safe-area-inset-bottom 为栏保留 space。
例如：margin-bottom: env(safe-area-inset-bottom)