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

【问题标题】：Black bars when using of Cordova's splashscreen on iOS在 iOS 上使用 Cordova 闪屏时出现黑条
【发布时间】：2020-11-12 03:58:21
【问题描述】：

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

Splashscreens 在 Android 设备和大多数 iOS 设备上运行良好。在有缺口的 iPhone 上（iPhone X/XR/Xs/Xs Max）它似乎不会像这里一样摆脱屏幕上下的一些黑条： Cordova app not displaying correctly on iPhone X (Simulator)

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

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

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

结果：没有变化

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

结果：没有变化

添加旧版 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>

编辑：

我应该在 Phonegap 构建上发布问题还是我在这里做错了什么？

【问题讨论】：

标签： ios iphone cordova splash-screen phonegap

【解决方案1】：

我使用 build.phonegap.com 构建 iOS 应用程序，因为我没有 MacBook，而且我的计算机功能不足以支持 MacOs Vm

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

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

示例尺寸：

【讨论】：

谢谢，感谢您的回答。我认为这可能是由于 phonegap 构建的错误，因为它们刚刚集成了 cordova-ios@6.0.0。我想问一下，您是否知道在云中租用 macos vm 以尝试 xcode 构建的好地方？我认为在 Mac 上构建的 Xcode 将有一些很好的机会来解决我的问题