3

I'm trying to export my app in ionic 3. But when I launch in the iPhone X emulator, the screen have 2 empty espaces in the top and bottom (screen problem?).

Anyone help to adapt the resolution to iPhone X resolution?

4

6 回答 6

6

为了删除空格，您可以添加viewport-fit=cover到您的元标记：

<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
于 2017-09-15T14:49:34.687 回答
4

Titanium SDK 也有同样的问题。问题是您需要提供适应新屏幕尺寸的正确启动屏幕：-

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

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

对于原生 Xcode，问题可能是相同的，并且通过将正确的图像放入 Asset-Catalog 来解决：

适用于 iPhone X 的 Xcode 资产目录

于 2017-09-13T12:46:37.450 回答
2

首先，添加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 大小的闪屏，给出它的路径config.xml

<splash src="resources/ios/splash/Default@3x~iphone.png" width="1125" height="2436"/>
于 2018-01-23T07:26:36.500 回答
2

为 iphone x 添加正确的启动图像启动图像添加帮助链接

然后按照这些

对于现有的cordova项目的手动修复

UI界面问题

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

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

在 meta 标签中设置 viewport-fit=cover

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

更多帮助

于 2018-01-10T07:51:58.440 回答
0

Cordova 插件状态栏已更新为在 2.3.0 中适用于 iPhoneX 请查看发行说明

于 2017-11-14T12:10:45.830 回答
0

首先，将 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">

第二个添加状态栏插件

科尔多瓦插件添加科尔多瓦插件状态栏

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

于 2018-07-24T07:31:27.257 回答