Therefore to cover both cases you need to overload the CSS rule with both and rely on the CSS fallback mechanism to apply the appropriate one: body) īonus: You can add body class like is-android or is-ios on deviceready var platformId = ĭ('is-' + platformId) your site to the home screen and launch it you have a white 20px bar on the bottom and your content overlaps with the IOS status bar (see. Note: in iOS 11.0 the function to handle these constants was called constant() but in iOS 11.2 Apple renamed it to env() (see here), So I'm currently having an issue with the status bar when trying to use my app on Ionic Viewer App, seems that even when I try to set a new style of the status bar, in iOS the background color it's kinda transparent but I want it to match the color of the header so both get fusioned making it look awesome. Fixing IOS 11 web apps (apple-mobile-web-app-capable). Rather than hard-coding a padding in pixels, you can handle this automatically in CSS using the new safe-area-inset-* constants in iOS 11. Once the black bars are removed, there's another thing that's different about the iPhone X to address: The status bar is larger than 20px due to the "notch", which means any content at the far top of your Cordova app will be obscured by it: So Im currently having an issue with the status bar when trying to use my app on Ionic Viewer App, seems that even when I try to set a new style of the status bar, in iOS the background color its kinda transparent but I want it to match the color of the header so both get fusioned making it look awesome.
Then create the images with the following dimensions in res/screen/ios (remove any existing ones): ~iphone~anyany.png - 1334x1334 To do so, add the following to the iOS platform in config.xml: The solution to remove the black areas (provided by in a comment below) is to use LaunchStoryboard images with cordova-plugin-splashscreen to replace the legacy launch images, used by Cordova by default. The white bars in UIWebView then disappear: Set viewport-fit=cover on the viewport tag, i.e.: I found the solution to the white bars here:
0 kommentar(er)
