Getting your Ionic apps updated for iOS 11 is easy. There are a few things you need to do and some steps are different depending on whether you’re using UIWebView or WKWebView.
Note: if you don’t push a new build then your apps will work the same as they always have. These changes are required for apps doing updates for iOS 11 using Xcode 9.
The latest stable release of ionic-angular introduces compatibility for the iPhone X to make sure that your app looks great on this new device. To update to the latest release follow the instructions mentioned here. We are working on even more fixes for the next release to improve our compatibility for the iPhone X even further.
npm install [email protected]
For those using Ionic for AngularJS (also known as Ionic 1), we just released 1.3.5 to address the iPhone X and safe regions. Follow these instructions to update to the latest release: https://github.com/ionic-team/ionic-v1/issues/317#issuecomment-339357499
bower install ionic-team/ionic-bower#1.3.5 # or npm npm install [email protected]
The first change is to make sure you update your viewport meta tag in your
index.html to add the
viewport-fit=cover field. This ensures the webview takes up the full size of the screen. The new default is to stick the webview in the new safe regions which is not what you want for Ionic/Cordova apps:
<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">
This change has been made to the base starter project for Ionic 1.x and 2.x and above, so new projects are covered.
Learn more about new safe regions in iOS 11.