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?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Pako Navarro
  • 168
  • 1
  • 2
  • 9

6 Answers6

6

In order to remove that empty spaces you can add viewport-fit=coverto your meta tag:

<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
Ernesto Schiavo
  • 1,020
  • 2
  • 12
  • 33
4

Had the same issue with the Titanium SDK. The issue is that you need to provide the correct launch-screens that adapt the new screen-sizes: -

  • Portrait: 1125x2436
  • Landscape: 2436x1125

For Titanium, it was just solved by adjusting the build-script to detect and package the launch-screens, so probably the Ionic team will do something similar soon!

For native Xcode, the issue can be the same and is resolved by placing the correct images into the Asset-Catalog:

Xcode Asset Catalog for iPhone X

Hans Knöchel
  • 11,422
  • 8
  • 28
  • 49
2

Add proper launch images for iphone x Launch image adding help link

Then follow these

For a manual fix to an existing cordova project

UI interface issue

Add this to your info.plist file. Fixing the launch image is a separate issue 

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

Set viewport-fit=cover in the meta tag

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

More help

Haza
  • 31
  • 7
  • 1
    This worked for me; however, running ionic prepare removes the `UILaunchStoryboardName` from the info.plist. Any advise? Here is my question with the full details: https://stackoverflow.com/questions/60197628/uilaunchstoryboardname-and-its-value-cdvlaunchscreen-is-being-removed-by-ionic – Rozgonyi Feb 17 '20 at 14:19
  • same Issue , it removes the UILaunchStoryboardName from the info.plist – David Jan 11 '21 at 09:36
2

First, add viewport-fit=cover into index.html meta tag

<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">

then, The statusbar plugin PR has been merged in. Please install the latest stable version of the cordova statusbar.

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

Next, add this CSS in your src/app/app.scss:

<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>

last one, add a 1125 × 2436 size splash screen for iphone X ,give path of it in config.xml

<splash src="resources/ios/splash/Default@3x~iphone.png" width="1125" height="2436"/>
Jaydeep Kataria
  • 817
  • 10
  • 22
0

Cordova plugin statusbar is updated to work for iPhoneX in 2.3.0 Please check the release notes

Prithivi Raj
  • 2,658
  • 1
  • 19
  • 34
0

First, add viewport-fit=cover into index.html meta tag

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

Second add Status bar plugin

cordova plugin add cordova-plugin-statusbar

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

Piyush Sardhara
  • 11
  • 2