I was using ionic 1.2.4 and followed https://blog.ionicframework.com/ios-11-checklist/ to fix my app for iPhone X. Then I tested in iPhone X simulator and there are positioning issues in UI. To make sure issues are not due to my custom css or JS, I created a new ionic 1 project and tested. But issues exists there too.
cordova cli: 8.0.0
ionic cli: 3.19.1
xcode: 9.2
This is what I did,
-
Created a new project
ionic start "Ionic1" tabs --type ionic1 -
Updatd bower.json. “ionic”: “ionic-team/ionic-bower#1.3.5”
bower install -
Removed cordova-plugin-ionic-webview from config.xml since we do not use it.
-
Fixed the index.html to add viewport-fit=cover
<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"> -
Changed the narbar color. (To identify the title bar easily)
-
Added statusbar plugin
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar -
Added the platform and built the app
ionic cordova platform add ios
ionic cordova build ios
8 Then I opened the xcode project and ran in iPhone X.
opened the app.
Changed the orientation to landscape.
Changed the orientation back to portrait and this happened.
issue 1: UI (header and footer) gets mispositioned in portrait after orientation change.
issue 2: Landscape titlebar is too high.
Then I added cordova-plugin-ionic-webview plugin and it worked fine.
Looks like safe regions are not working properly in UIWebview.
Please help.