iPhone X上的离子屏尺寸问题

Question

我正在尝试在离子3 中导出我的应用。但是当我在iPhone X模拟器中启动时，屏幕顶部和底部有2个空的空格（屏幕问题？）。

任何人都有助于使分辨率适应iPhone X分辨率？

Answer 1

要删除这些空格，您可以将<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> 添加到元标记中：

If IsNull(Json("issues")(i + 1)("fields")("components")) Then
    ActiveSheet.Cells(i + 1, 5).Value = ""
Else
    ActiveSheet.Cells(i + 1, 7) = Json("issues")(i + 1)("fields")("components")(1)("name")
End If

Answer 2

与Titanium SDK存在同样的问题。问题是您需要提供适应新屏幕大小的正确启动屏幕： -

• 肖像：1125x2436
• 风景：2436x1125

对于Titanium，它只是通过调整构建脚本来检测和打包启动屏幕来解决，所以Ionic团队可能很快会做类似的事情！

对于原生Xcode，问题可以是相同的，并通过将正确的图像放入资产目录来解决：

Answer 3

首先，将viewport-fit=cover添加到index.html元标记

中

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

然后，状态栏插件PR已合并。请安装最新稳定版本的cordova状态栏。

ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

接下来，在src / app / app.scss中添加此CSS：

<style>
.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: calc(44px + constant(safe-area-inset-top));
}


.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: constant(safe-area-inset-top);
}

div.tab-nav.tabs {
  height: calc(49px + constant(safe-area-inset-bottom));
}

ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs {
  top: calc(64px + constant(safe-area-inset-top));
}
</style>

最后一个， 为iphone X添加一个1125×2436大小的闪屏，在index.html

中提供它的路径

<splash src="resources/ios/splash/Default@3x~iphone.png" width="1125" height="2436"/>

Answer 4

Cordova插件状态栏已更新，适用于2.3.0中的iPhoneX请查看release notes

Answer 5

为iphone x Launch image adding help link

添加正确的启动图像

然后按照这些

手动修复现有的cordova项目

UI界面问题

将此添加到info.plist文件中。修复启动图像是一个单独的问题

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

在元标记中设置viewport-fit = cover

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

More help

Answer 6

首先，将viewport-fit = cover添加到index.html元标记

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

第二个添加状态栏插件

cordova插件添加cordova-plugin-statusbar

cordova插件添加https://github.com/apache/cordova-plugin-statusbar.git