帶電容的ios webview，設置安全區域

Question

使用電容在 ios 中構建應用程序。 在 ios 中，webview 覆蓋整個屏幕，對於 iphone-x，這意味着將包含缺口並且內容將在其后面，如右側圖片。 但我想要左邊的圖片，“禁止區域”上的黑條。

預期的解決方案（html/css）是設置正確的視口並使用“安全區域”插入-？”，se： https ://css-tricks.com/the-not-and-css/ 但是對於 ios 中的 webview，'safe-area'insert' 將始終為 0，這就是它的工作方式 => 這個解決方案是無用的。

我該如何解決這個問題？ 我可以將 webview 更改為不覆蓋整個屏幕，而不更改電容器框架嗎？

Answer 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);
}

Answer 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上的文檔