iPhone 11 Pro Max 上的问题屏幕离子应用程序

Question

我在 iPhone 11 Pro Max 上的 Ionic 应用程序的外观和感觉方面遇到了一些问题：

如何改善和修复屏幕上下方的空格问题？

**更新

这是我的 config.xml：

<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    <icon height="57" src="resources/ios/icon/icon.png" width="57" />
    <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
    <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
    <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
    <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
    <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
    <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
    <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
    <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
    <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
    <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
    <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
    <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
    <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
    <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
    <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
    <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
    <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
    <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
    <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
    <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
    <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
    <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
    <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
    <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
    <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
    <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
    <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
    <icon height="196" src="resources/ios/icon/icon-98@2x.png" width="196" />
    <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
    <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
    <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
    <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
    <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
    <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
    <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
    <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
    <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
    <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
    <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
    <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
    <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
    <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
    <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
    <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />

我已关注可能重复的链接，但不幸的是我无法全屏查看该应用程序。我还在index.html 中添加了这个元信息：

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

Answer 1

省略viewport-fit=cover 声明：ionic-webview 基于 WKWebview，如果您不在该元标记中覆盖它，WKWebview 会为您处理它。