带电容的Ios webview，设置安全区域
在ios中使用capacitor构建应用程序。在ios中，webview覆盖了整个屏幕，对于iphone-x来说，这意味着将包括缺口，内容将在其后面，就像右边的图片一样。但是我想要左边的图片，黑条在“禁止区域”上。
预期的解决方案(html/css)将是设置正确的视区，并使用‘安全区域’插入-？‘，se：https://css-tricks.com/the-notch-and-css/，但对于ios中的webview，’安全区域‘插入’将始终是0，这就是它的工作方式=>这个解决方案是无用的。
我该如何解决这个问题呢？我可以更改网页视图，使其不覆盖整个屏幕，而不更改电容框架吗？
回答 2
Stack Overflow用户
发布于 2020-09-15 16:46:06
例如，有一个由电容器预先设置的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);
}Stack Overflow用户
发布于 2021-05-13 10:28:25
您可以使用兼容的Cordova插件cordova-plugin-safearea
npm i -D cordova-plugin-safearea
npx cap sync安装此软件后，您可以请求cordova/电容器桥上的安全余量区域：
// 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 )；该项目被包装在电容器中，并在两个具有不同巧妙苹果缺口屏幕格式(iPhone 8和iPhone 11专业版)的iOS设备上进行了测试。
有关详细信息，请参阅https://github.com/rickgbw/cordova-plugin-safearea上的文档
https://stackoverflow.com/questions/57329955
复制相似问题
腾讯云开发者
