首页 > 解决方案 > IphoneX 屏幕未覆盖科尔多瓦项目中的页眉和页脚

问题描述

我的应用程序与 iPhoneX 不兼容,搜索了很多并尝试了很多不同的东西。初始屏幕在每个设备上都显示得很好,但内部屏幕没有覆盖页眉和页脚。使用建议制作全屏的相同图像尺寸。还在 head 标记中使用元标记 index.html 文件中的视口。

在我的科尔多瓦项目中使用科尔多瓦 7.1.0 和 ios 4.5.4 版本,该应用程序在所有设备上运行良好,但与 iPhoneX 屏幕不兼容。当在模拟器中的 iphonex 上运行项目时,它在页眉和页脚上留下了空白。

在 index.html 文件的 head 标记中使用下面的图像大小和 meta 标记。

<splash platform="ios" src="res/screens/ios/750x1334.png" />
        <splash platform="ios" src="res/screens/ios/1242x2208.png" />
        <splash platform="ios" src="res/screens/ios/1278x732.png" />
        <splash platform="ios" src="res/screens/ios/1334x750.png" />
        <splash platform="ios" src="res/screens/ios/1334x1334.png" />
        <splash platform="ios" src="res/screens/ios/2208x1242.png" />
        <splash platform="ios" src="res/screens/ios/2208x2208.png" />
        <splash platform="ios" src="res/screens/ios/2732x2732.png" />

和 head 标签中的元标签:

标签: ioscordovascreeniphone-x

解决方案


启动屏幕/启动屏幕

完成 iOS 构建后转到 ->

Projectpath -> Platform ->iOS ->Open Project in Xcode
在 Xcode 中
ProjectName -> Resources -> Images.xcassets -> LaunchImage 在此处输入图像描述



标题: 添加 Cordova 状态栏插件
cordova plugin add cordova-plugin-statusbar

config.xml
在配置文件中添加以下首选项

    <preference name="StatusBarBackgroundColor" value="#00458D" />
    <preference name="StatusBarStyle" value="blacktranslucent" />
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarDefaultScrollToTop" value="false" />

页脚:
在每个 .html 页面中,在标签内添加以下<head>代码

<meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />

推荐阅读