Angularjs iOS设备中的离子标题栏顶部填充问题

我在ionic v1中开发一个侧菜单应用程序。在浏览器中一切正常。但当我在设备中安装应用程序时，标题栏会出现，顶部有一些填充。这显示了状态栏和标题栏之间的空间。我已经尝试了所有可能的方法，但没能解决它。以下是该问题的截图

我安装了statusbar插件并更新了config.xml中的首选项值

这是我的用于iOS的config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.iton.vbuzz" version="1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My App</name>
<description>
  My App V1.0
</description>
<content src="index.html"/>
<access origin="*"/>
<preference name="phonegap-version" value="cli-6.2.0" />
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="FadeSplashScreen" value="true" />  
<preference name="FadeSplashScreenDuration" value="1.0" /> 
<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#D6D6D6"/>
<preference name="StatusBarStyle" value="lightcontent" /> 
<preference name="orientation" value="portrait" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<preference name="target-device"              value="universal" /> 
<preference name="prerendered-icon"           value="true" /> 
<preference name="detect-data-types"          value="true" /> 
<preference name="exit-on-suspend"            value="false" /> 

<platform name="ios">
<splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/>
<splash src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
<splash src="resources/ios/splash/Default~iphone.png" width="320" height="480"/>
<splash src="resources/ios/splash/2048X1536-04.png" width="2048" height="1536" />
<splash src="resources/ios/splash/Default-667h@2x~iphone.png" width="750" height="1334" />

<icon src="resources/ios/icon/icon.png" width="57" height="57"/>
<icon src="resources/ios/icon/icon@2x.png" width="114" height="114"/>
<icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
<icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
<icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
<icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
<icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
<icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
<icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
<icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
<icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
<icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
<icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
<icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
<icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
<icon src="resources/ios/icon/icon-small@3x.png" width="87" height="87"/>
<config-file parent="UIStatusBarHidden" platform="ios" target="*-Info.plist">
  <false/>
</config-file>
<config-file parent="UIViewControllerBasedStatusBarAppearance" platform="ios" target="*-Info.plist">
  <true/>
</config-file>
</platform>

<plugin spec="https://github.com/apache/cordova-plugin-console.git
 " name="org.apache.cordova.console" source="git" version="0.2.13" />


<plugin spec="https://github.com/apache/cordova-plugin-device.git" name="org.apache.cordova.device" source="git" version="0.3.0" />


 <plugin spec="https://github.com/apache/cordova-plugin-splashscreen.git" name="cordova-plugin-splashscreen" source="git" version="4.0.1-dev" />


  <plugin spec="https://github.com/phonegap-build/StatusBarPlugin.git" name="com.phonegap.plugin.statusbar" source="git" version="1.1.0" />


  <plugin spec="https://github.com/apache/cordova-plugin-geolocation.git" name="cordova-plugin-geolocation" source="git" version="2.4.1-dev" />


  <plugin spec="https://github.com/apache/cordova-plugin-network-information.git" name="cordova-plugin-network-information" source="git" version="1.3.1-dev" />


  </widget>

---

请帮我解决这个问题。提前感谢

您可以将

viewport fit=cover

添加到index.html文件中的

viewport

元数据标记中，如下所示

<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">

参考：

---

iOS 11.2也可以正常工作。

您好，您解决了这个问题吗？我也有同样的问题，但没有直接解决。我必须添加一个javascript代码来检查设备平台是否为ios，然后在每个初始化页面上执行以下操作：$（“.toolbar”）.css（'paddingTop'，0）；有时我会这样做：$（“.page\u content”）.css（'top'，0）；我刚刚用ionic 4创建了一个应用程序，它已经设置了viewport fit=cover，但在Android中，我仍然有在标题中填充top的问题

<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">