iPhone 11 Pro Max上的问题屏幕离子应用程序 [英] Problem screen ionic app on iPhone 11 Pro Max

问题描述

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

I'm facing some problems on the look and feel of my Ionic app on iPhone 11 Pro Max:

如何改善和解决屏幕上部和下部的空白问题?

How Can I improve and fix the problem of the spaces on both upper and bottom part of the screen?

**更新

这是我的config.xml:

This is my 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/[e-mail]" width="114" />
    <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
    <icon height="58" src="resources/ios/icon/[e-mail]" width="58" />
    <icon height="87" src="resources/ios/icon/[e-mail]" width="87" />
    <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
    <icon height="40" src="resources/ios/icon/[e-mail]" width="40" />
    <icon height="60" src="resources/ios/icon/[e-mail]" width="60" />
    <icon height="48" src="resources/ios/icon/[e-mail]" width="48" />
    <icon height="55" src="resources/ios/icon/[e-mail]" width="55" />
    <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
    <icon height="58" src="resources/ios/icon/[e-mail]" width="58" />
    <icon height="87" src="resources/ios/icon/[e-mail]" width="87" />
    <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
    <icon height="80" src="resources/ios/icon/[e-mail]" width="80" />
    <icon height="120" src="resources/ios/icon/[e-mail]" width="120" />
    <icon height="88" src="resources/ios/icon/[e-mail]" width="88" />
    <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
    <icon height="100" src="resources/ios/icon/[e-mail]" width="100" />
    <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
    <icon height="120" src="resources/ios/icon/[e-mail]" width="120" />
    <icon height="180" src="resources/ios/icon/[e-mail]" width="180" />
    <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
    <icon height="144" src="resources/ios/icon/[e-mail]" width="144" />
    <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
    <icon height="152" src="resources/ios/icon/[e-mail]" width="152" />
    <icon height="167" src="resources/ios/icon/[e-mail]" width="167" />
    <icon height="172" src="resources/ios/icon/[e-mail]" width="172" />
    <icon height="196" src="resources/ios/icon/[e-mail]" 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 :

I've followed the possible duplicated link, but unfortunately I'm not able to get full screen the app. I've also added this meta info in index.html:

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

推荐答案

省略 viewport-fit = cover 声明:ionic-webview基于WKWebview，如果您需要WKWebview会为您处理不要在该meta标签中覆盖它.

Leave out the viewport-fit=cover declaration: ionic-webview is based on WKWebview, and WKWebview handles it for you if you don't overwrite it in that meta tag.

这篇关于iPhone 11 Pro Max上的问题屏幕离子应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！