iOS 11状态栏将视图向下推20px [英] iOS 11 Status bar pushing the view down by 20px
问题描述
iOS 11状态栏在第一次启动时将视图下推,但我遇到了问题,但是当我按下输入时,它会将视图推回正常状态.
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.
我添加了viewport-fit=cover
,但未能解决问题.
I added viewport-fit=cover
but it didn't fix the issue.
我正在使用cordova-plugin-statusbar
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:
我在UI上使用Framework7和一些插件:
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"
这是我的config.xml:
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>
推荐答案
我遇到了同样的问题,在我的IOS 10.3上运行正常,在IOS 11.3上出现了问题.
I had this same problem, it was working fine on my IOS 10.3 and had the issue on IOS 11.3.
固定在config.xml中添加以下条目:
Fixed adding these entries on config.xml:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#4183D7" />
<preference name="StatusBarStyle" value="lightcontent" />
这篇关于iOS 11状态栏将视图向下推20px的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!