Я пишу приложение с Cordova, Ioni c v1 и AngularJS 1.5.3.
ionic info
Ionic:
ionic (Ionic CLI) : 4.10.3 (C:\Users\User\node_modules\ionic)
Ionic Framework : ionic1 1.3.5
@ionic/v1-toolkit : 1.0.22
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 8.1.0, ios 6.1.0, browser 5.0.4, windows 4.4.3
Cordova Plugins : cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)
System:
Android SDK Tools : 26.1.1 (C:\Users\User\Documents\Android\sdk)
NodeJS : v10.21.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10
Раньше выходил новый iPhone X и Я добавил код для корректировки "безопасной зоны".
css
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Это работало для меня
Однако я заметил, что с iPhone X и XR с iOS 13.6 у меня возникают проблемы с «безопасной зоной».
Поскольку я using cordova- ios 6.1.0 Я использую только WkWebView.
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
введите описание изображения здесь
Я обнаружил, что для достижения прогресса мне нужно умножить значение safe-area-inset-bottom на 4.
$calculated_padding_bottom: calc(env(safe-area-inset-bottom) * 2);
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) $calculated_padding_bottom env(safe-area-inset-left);
}
Что может быть не так?