IOS 11 STATUS BAR OVERLAP INSTALL
To use the Status Bar plugin, first install it in the usual manner: This plugin is also used to alter the appearance of the status bar (color/style) from the native side so you can customize your applications to fit your specific needs.
There’s also a native solution available via the Cordova Status Bar plugin. They use the Cordova Device plugin (installed automatically when you create a new ionic project with the CLI) to detect the platform details and will apply different CSS classes to the navigation bars and other UI objects to handle things based on platform and OS versions. Some UI frameworks like Ionic actually do this for you. One common solution on the web side is to offset the application content by 20 pixels from the top to account for the status bar when the platform is detected as iOS7 using the Cordova Device Plugin. There are different ways to handle this iOS7 change in your applications. You can see how the status bar now appears to blend in with the header content in the image below from the Apple docs showing iOS7 vs iOS6:
This is due to the iOS7 change for ViewControllers (containing the WebView running your PhoneGap application) to display full screen by default with a transparent Status Bar overlaying it rather than having its own designated space in the top 20 pixels of the screen as before.
If you’re building PhoneGap/Cordova applications for iOS, you’ve likely run into the iOS7 issue where the status bar overlaps the content in the top portion of your application where a navigation bar would typically display.
0 kommentar(er)
