问题
I'm facing an issue with the iOS 11 status bar pushing the view down on first launch, but when i hit an input, it pushes the view back to the normal state.
I added viewport-fit=cover but it didn't fix the issue.
I'm using cordova-plugin-statusbar
<plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
Screenshots of the issue then when pushed back to normal:
I'm using Framework7 for the UI, and some plugins:
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-keyboard 1.2.0 "Keyboard"
cordova-plugin-statusbar 2.3.0 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
es6-promise-plugin 4.1.0 "Promise"
phonegap-plugin-push 2.0.0 "PushPlugin"
And here's my config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="APPPACKAGENAME" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Mayday</name>
<description>
Senior Project By Mohamad Fala
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Mohamad Fala
</author>
<content src="index.html" />
<access origin="*" />
<access origin="content:///*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<icon density="ldpi" src="res/icons/android/ldpi.png"/>
<icon density="mdpi" src="res/icons/android/mdpi.png"/>
<icon density="hdpi" src="res/icons/android/hdpi.png"/>
<icon density="xhdpi" src="res/icons/android/xhdpi.png"/>
<icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/>
<icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/>
<splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/>
<splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/>
<splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/>
<splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/>
<splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/>
<splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/>
<preference name="android-minSdkVersion" value="14" />
<allow-intent href="market:*" />
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>
</platform>
<platform name="ios">
<icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/>
<icon src="res/icons/ios/icon-small.png" width="29" height="29"/>
<icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/>
<icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/>
<icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/>
<icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/>
<icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/>
<icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/>
<icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/>
<icon src="res/icons/ios/icon.png" width="57" height="57"/>
<icon src="res/icons/ios/icon@2x.png" width="114" height="114"/>
<icon src="res/icons/ios/icon-60.png" width="60" height="60"/>
<icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/>
<icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/>
<icon src="res/icons/ios/icon-72.png" width="72" height="72"/>
<icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/>
<icon src="res/icons/ios/icon-76.png" width="76" height="76"/>
<icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/>
<icon src="res/icons/ios/icon-167.png" width="167" height="167"/>
<icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/>
<splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/>
<splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/>
<resource-file src="GoogleService-Info.plist" />
<access origin="*" />
<access origin="content:///*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="BackupWebStorage" value="none" />
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
<string>need to photo library access to upload pictures for posts</string>
</edit-config>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
<feature name="Keyboard">
<param name="ios-package" onload="true" value="CDVKeyboard" />
</feature>
</platform>
<preference name="DisallowOverscroll" value="true" />
<engine name="browser" spec="^5.0.1" />
<plugin name="cordova-plugin-console" spec="~1.0.1" />
<plugin name="cordova-plugin-camera" spec="https://github.com/apache/cordova-plugin-camera" />
<plugin name="cordova-plugin-keyboard" spec="https://github.com/cjpearson/cordova-plugin-keyboard" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
<plugin name="phonegap-plugin-push" source="npm" spec="~1.8.0">
<param name="SENDER_ID" value="981753167590" />
</plugin>
<plugin name="cordova-plugin-file-transfer" spec="^1.7.0" />
<engine name="android" spec="~6.4.0" />
<plugin name="cordova-plugin-statusbar" spec="^2.3.0" />
</widget>回答1:
I had this same problem, it was working fine on my IOS 10.3 and had the issue on IOS 11.3.
Fixed adding these entries on config.xml:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#4183D7" />
<preference name="StatusBarStyle" value="lightcontent" />来源：https://stackoverflow.com/questions/47848601/ios-11-status-bar-pushing-the-view-down-by-20px