带电容的ios webview，设置安全区域

Posted 2023-02-19

【中文标题】带电容的ios webview，设置安全区域

【英文标题】：Ios webview with capacitor, set safe areas

【发布时间】：2019-12-11 06:52:58

【问题描述】：

在 ios 中使用电容器构建应用程序。在 ios 中，webview 覆盖了整个屏幕，对于 iphone-x，这意味着将包含缺口并且内容将在其后面，如右图所示。但我想要左边的图片，“禁区”上的黑条。

对此的预期解决方案 (html/css) 是设置正确的视口并使用“安全区域”插入-？，se：https://css-tricks.com/the-notch-and-css/ 但是对于 ios 中的 webview，'safe-area'insert' 将始终为 0，这就是它的工作原理 => 这个解决方案是无用的。

我该如何解决这个问题？我可以在不更改电容器框架的情况下将 webview 更改为不覆盖整个屏幕吗？

【问题讨论】：

我确实以一种肮脏的方式解决了这个问题，检查了屏幕宽度/高度（window.innerWidth / window.innerHeight）并应用了填充。有趣的宽度 x 高度：375x812、414x896、414x736、375x667。

您找到解决方案了吗？看起来很多人都有同样的问题！

【参考方案1】：

有一个由电容器预设的 CSS 变量，例如，您可以使用它来设置填充或边距。

html 
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right);

【参考方案2】：

您可以使用兼容的 Cordova 插件cordova-plugin-safearea

npm i -D cordova-plugin-safearea
npx cap sync

安装后，您可以请求科尔多瓦/电容器桥上的安全边距区域：

// Types for clarity
type SafeArea = 
  top: string,
  bottom: string,


window.plugins.safearea.get(
  (result: SafeArea) => 
    // elegantly set the result somewhere in app state
  ,
  (error: any) => 
    // maybe set some sensible fallbacks?
  
);

您可以使用这些值在正文或标题/底部菜单组件上指定额外的填充

文档说它将值作为数字返回，但在我看来它们实际上是字符串（在对它们进行数学运算之前考虑 parseFloat）。

---

我刚刚在 React 中实现了这个（在 React.useLayoutEffect 中运行 getter）；该项目封装在 Capacitor 中，并已在具有不同巧妙 Apple 刘海屏格式的两台 iOS 设备（iPhone 8 和 iPhone 11 Pro）上进行了测试。

更多信息请参阅https://github.com/rickgbw/cordova-plugin-safearea的文档