在 iOS 上使用 Cordova 的闪屏时出现黑条

Question

好吧，我通常不会 post 关于 Whosebug 的问题，但我发现自己被困在这里。所以我正在用 PhoneGap & Cordova 构建一个应用程序。我不认为这是相关的，但我正在为 UI.

使用 framework7

Splashscreens 在 Android 设备和 大多数 iOS 设备上运行良好。在 iPhone 上有一个缺口（iPhone X/XR/Xs/Xs Max）似乎它不会像这里那样摆脱屏幕下方和上方的一些黑条：

我必须说我已经做了很多研究并访问了一堆不同的 Whosebug 线程，但是，我仍然无法让它们消失:(。

以下是我迄今为止尝试过的列表：

重新启动 iOS 设备以清除闪屏缓存

结果：无变化

在元标签中添加 viewport-fit=cover

结果：无变化

添加 Legacy Splashscreens（我检查过所有图像尺寸都符合宽度和高度属性）。

结果：无变化。屏幕周围的黑条（顶部和底部）。视口看起来有点类似于 iphone 6/7.

    <splash src="res/screen/ios/320x480.png" width="320" height="480" />
    <splash src="res/screen/ios/640x960.png" width="640" height="960" />
    <splash src="res/screen/ios/640x1136.png" width="640" height="1136" />
    <splash src="res/screen/ios/768x1024.png" width="768" height="1024" />
    <splash src="res/screen/ios/1536x2008.png" width="1536" height="2008" />
    <splash src="res/screen/ios/1536x2048.png" width="1536" height="2048" />
    <splash src="res/screen/ios/i6.png" width="750" height="1334" />
    <splash src="res/screen/ios/i6s.png" width="1242" height="2208" />
    <splash src="res/screen/ios/ixr.png" width="828" height="1792" />
    <splash src="res/screen/ios/ixsm.png" width="1242" height="2688" />

添加 SpringBoard 图像（尝试了两种不同的代码。在每种情况下，我都根据 cordova 和 apple 的文档验证了图像的大小）：

结果：最糟糕的结果！视口现在看起来与 iPhone 4 或 5 非常相似。因此屏幕没有缩小，但是，屏幕和键盘看起来“放大”或像拉伸了

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />

和

    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />

如果您有任何建议或想法，请告诉我！我已经遇到这个问题几个星期了，我感到很迷茫。

额外信息：

我使用 build.phonegap.com 构建了 iOS 应用程序，因为我没有 MacBook，而且我的计算机对于 MacOs Vm

来说不够强大

这是我的完整代码：

<?xml version='1.0' encoding='utf-8'?>
<widget id="my.pkg.id" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>My app name</name>
    <description>
        Description
    </description>
    <author email="emailadress@email.com" href="email.com">
        My Name
    </author>
    <content src="index.html" />
    <config-file platform="android" parent="/manifest" mode="merge">
        <application android:theme="@android:style/Theme.Black.NoTitleBar"></application>
    </config-file>
    <plugin name="cordova-plugin-statusbar" source="npm" />
    <plugin name="cordova-plugin-whitelist" source="npm" />
    <plugin name="cordova-plugin-backbutton" source="npm" />
    <plugin name="cordova-plugin-ios-camera-permissions" source="npm" />
    <gap:plugin name="cordova-plugin-customurlscheme" source="npm">
        <plugin name="cordova-plugin-device" source="npm" />
        <param name="URL_SCHEME" value="myurlschm" />
    </gap:plugin>
    <plugin name="cordova-plugin-wkwebviewxhrfix" />
    <plugin name="cordova-plugin-wkwebview-engine" />
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <engine name="ios" spec="latest" />
    <plugin name="cordova-plugin-splashscreen" source="npm" />
    <plugin name="cordova-universal-links-plugin" source="npm" />
    <plugin name="cordova-plugin-disable-ios11-statusbar" source="npm" spec="*" />
    <plugin name="cordova-plugin-inappbrowser" source="npm" spec="*" />
    <plugin name="phonegap-plugin-barcodescanner" source="npm" spec="*" />
    <allow-navigation href="data:*" />
    <allow-intent href="data:*" />
    <access origin="data:*" />
    <allow-navigation href="https://code.jquery.com/*" />
    <allow-intent href="https://code.jquery.com/*" />
    <access origin="https://code.jquery.com/*" />
    <allow-navigation href="https://ajax.googleapis.com/*" />
    <allow-intent href="https://ajax.googleapis.com/*" />
    <access origin="https://ajax.googleapis.com/*" />
    <allow-navigation href="https://maxcdn.bootstrapcdn.com/*" />
    <allow-intent href="https://maxcdn.bootstrapcdn.com/*" />
    <access origin="https://maxcdn.bootstrapcdn.com/*" />
    <allow-navigation href="https://debug1.phonegap.com/*" />
    <allow-intent href="https://debug1.phonegap.com/*" />
    <access origin="https://debug1.phonegap.com/*" />
    <allow-navigation href="https://debug2.phonegap.com/*" />
    <allow-intent href="https://debug2.phonegap.com/*" />
    <access origin="https://debug2.phonegap.com/*" />
    <allow-navigation href="https://debug3.phonegap.com/*" />
    <allow-intent href="https://debug3.phonegap.com/*" />
    <access origin="https://debug3.phonegap.com/*" />
    <allow-navigation href="https://debug4.phonegap.com/*" />
    <allow-intent href="https://debug4.phonegap.com/*" />
    <access origin="https://debug4.phonegap.com/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="googlechrome:*" />
    <edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
        <string>need camera access to take pictures</string>
    </edit-config>
    <edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
        <string>need photo library access to get pictures from there</string>
    </edit-config>
    <edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
        <string>need location access to find things nearby</string>
    </edit-config>
    <edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
        <string>need photo library access to save pictures there</string>
    </edit-config>
    <access origin="*" />
    <preference name="FadeSplashScreenDuration" value="1250" />
    <preference name="orientation" value="portrait" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="android-minSdkVersion" value="17" />
    <preference name="AndroidLaunchMode" value="singleTask" />
    <platform name="android">
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/uses-permission" xmlns:android="http://schemas.android.com/apk/res/android">
            <uses-permission android:name="android.permission.CAMERA" />
        </edit-config>
        <allow-intent href="market:*" />
        <preference name="DisallowOverscroll" value="true" />
        <preference name="LoadUrlTimeoutValue" value="10000" />
        <preference name="ErrorUrl" value="index.html" />
        <preference name="android-minSdkVersion" value="17" />
        <preference name="AndroidLaunchMode" value="singleTop" />
        <preference name="android-targetSdkVersion" value="29" />
        <preference name="FadeSplashScreenDuration" value="1250" />
        <preference name="SplashScreenDelay" value="3000" />
        <icon src="test.png" qualifier="ldpi" />
        <icon src="test.png" qualifier="mdpi" />
        <icon src="test.png" qualifier="hdpi" />
        <icon src="test.png" qualifier="xhdpi" />
        <icon src="test.png" qualifier="xxhdpi" />
        <icon src="test.png" qualifier="xxxhdpi" />
        <icon src="test.png" qualifier="fr-xxhdpi" />
        <splash src="ldpi.png" qualifier="ldpi" />
        <splash src="mdpi.png" qualifier="mdpi" />
        <splash src="hdpi.png" qualifier="hdpi" />
        <splash src="xhdpi.png" qualifier="xhdpi" />
        <splash src="fr-xhdpi.png" qualifier="fr-xhdpi" />
        <splash src="portrait-xxhdpi.png" qualifier="port-xxhdpi" />
        <splash src="landscape-xxhdpi.png" qualifier="land-xxhdpi" />
        <splash src="xxxhdpi.png" qualifier="xxxhdpi" />
    </platform>
    <platform name="ios">
        <feature name="CDVWKWebViewEngine">
            <param name="ios-package" value="CDVWKWebViewEngine" />
        </feature>
        <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
        <feature name="StatusBar">
            <param name="ios-package" value="CDVStatusBar" onload="true" />
        </feature>
        <preference name="Allow3DTouchLinkPreview" value="false" />
        <preference name="ShowSplashScreenSpinner" value="false" />
        <preference name="EnableViewportScale" value="true" />
        <preference name="DisallowOverscroll" value="true" />
        <preference name="deployment-target" value="10.0" />
        <preference name="StatusBarBackgroundColor" value="#000000" />
        <preference name="StatusBarStyle" value="blacktranslucent" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <preference name="FadeSplashScreenDuration" value="750" />
        <preference name="SplashScreenDelay" value="1000" />
        <splash src="res/screen/ios/320x480.png" width="320" height="480" />
        <splash src="res/screen/ios/640x960.png" width="640" height="960" />
        <splash src="res/screen/ios/640x1136.png" width="640" height="1136" />
        <splash src="res/screen/ios/768x1024.png" width="768" height="1024" />
        <splash src="res/screen/ios/1536x2008.png" width="1536" height="2008" />
        <splash src="res/screen/ios/1536x2048.png" width="1536" height="2048" />
        <splash src="res/screen/ios/i6.png" width="750" height="1334" />
        <splash src="res/screen/ios/i6s.png" width="1242" height="2208" />
        <splash src="res/screen/ios/ixr.png" width="828" height="1792" />
        <splash src="res/screen/ios/ixsm.png" width="1242" height="2688" />
        <icon src="res/icon/ios/icon-1024.png" width="1024" height="1024" />
        <icon src="res/icon/ios/icon-small.png" width="29" height="29" />
        <icon src="res/icon/ios/icon-small@2x.png" width="58" height="58" />
        <icon src="res/icon/ios/icon-small@3x.png" width="87" height="87" />
        <icon src="res/icon/ios/icon-small-40.png" width="40" height="40" />
        <icon src="res/icon/ios/icon-small-40@2x.png" width="80" height="80" />
        <icon src="res/icon/ios/icon-small-40@3x.png" width="120" height="120" />
        <icon src="res/icon/ios/icon-small-50.png" width="50" height="50" />
        <icon src="res/icon/ios/icon-small-50@2x.png" width="100" height="100" />
        <icon src="res/icon/ios/icon.png" width="57" height="57" />
        <icon src="res/icon/ios/icon@2x.png" width="114" height="114" />
        <icon src="res/icon/ios/icon-60.png" width="60" height="60" />
        <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120" />
        <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180" />
        <icon src="res/icon/ios/icon-72.png" width="72" height="72" />
        <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144" />
        <icon src="res/icon/ios/icon-76.png" width="76" height="76" />
        <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152" />
        <icon src="res/icon/ios/icon-167.png" width="167" height="167" />
        <icon src="res/icon/ios/icon-83.5@2x.png" width="167" height="167" />
        <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
        <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
        <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
        <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
        <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
        <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
        <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
        <splash src="res/screen/ios/Default@2x~ipad~comany.png" />
    </platform>
    <platform name="windows">
        <preference name="FadeSplashScreenDuration" value="750" />
        <preference name="SplashScreenDelay" value="3000" />
    </platform>
</widget>

编辑：

我应该 post Phonegap 构建问题还是我做错了什么？

Answer 1

I build the iOS app using build.phonegap.com since I don't own a MacBook and my computer is not powerful enough for a MacOs Vm

他们肯定没有为所有 splash screen sizes 提供适当的支持，或者您没有正确实施所有尺寸。检查他们的文档。每当 Xcode 更新时（这种情况经常发生），都会添加新的初始屏幕尺寸。

注意链接的文章可能已过时，或者它将是第二个具有新屏幕尺寸的新 Xcode 版本发布。

示例尺寸：

在 iOS 上使用 Cordova 的闪屏时出现黑条

Black bars when using of Cordova's splashscreen on iOS

ios

iphone

cordova

splash-screen

phonegap

额外信息：

编辑：