CODEWITHSUNDEEP
iosionic-frameworkiphone-x
Pako Navarro
Pako Navarro

Reputation: 168

Screen size issue with ionic on iPhone X

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?

Upvotes: 3

Views: 10192

Answers (6)

Jaydeep Kataria
Jaydeep Kataria

Reputation: 867

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

Upvotes: 2

Piyush Sardhara
Piyush Sardhara

Reputation: 11

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

Upvotes: 0

Haza
Haza

Reputation: 37

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

Upvotes: 2

Prithivi Raj
Prithivi Raj

Reputation: 2736

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

Upvotes: 0

Ernesto Schiavo
Ernesto Schiavo

Reputation: 1060

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

Upvotes: 6

Hans Kn&#246;chel
Hans Kn&#246;chel

Reputation: 11552

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

Upvotes: 4

Related Questions