iOS 状态栏重叠内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32944888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS status bar overlapping contents
提问by RAKESH DADHICH
I have built phonegap application, it works fine on android and windows. But for iOS I am facing issue as, status bar contents and page contents are mixed up therefore i unable to tap on the back button provided in header. Can any body help me about this..?
我已经构建了 phonegap 应用程序，它在 android 和 windows 上运行良好。但是对于 iOS，我面临的问题是，状态栏内容和页面内容混在一起，因此我无法点击标题中提供的后退按钮。任何机构都可以帮我解决这个问题..？
This is my config.xml file
这是我的 config.xml 文件
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "io.example.com"
version = "1.0.2">
<name>MyAPP</name>
<description>
</description>
<author email="[email protected]">
Rakesh
</author>
<access origin="*"/>
<content src="index.html" />
<preference name="target-device" value="universal" /> <!-- all: possible values handset, tablet, or universal -->
<!-- <preference name="fullscreen" value="true" /> --> <!-- all: hides the status bar at the top of the screen -->
<preference name="webviewbounce" value="false" /> <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
<preference name="ios-statusbarstyle" value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="auto-hide-splash-screen" value="true" /> <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="android-minSdkVersion" value="7" /> <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="phonegap-version" value="3.7.0" />
<icon src="icon.png" />
<icon src="icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="icon-57-2x.png" gap:platform="ios" width="114" height="114" />
<icon src="icon-72-2x.png" gap:platform="ios" width="144" height="144" />
<icon src="icon-120.png" gap:platform="ios" width="120" height="120" />
<icon src="icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="icon-76-2x.png" gap:platform="ios" width="152" height="152" />
<gap:plugin name="com.phonegap.plugin.statusbar" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:splash src="SplashScreenImage.jpg" gap:platform="winphone" />
<gap:splash src="splash.png" />
<gap:splash src="screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
<gap:config-file platform="ios" parent="CFBundleShortVersionString">
<string>100</string>
</gap:config-file>
<feature name="App">
<param name="android-package" value="org.apache.cordova.App"/>
</feature>
<feature name="http://api.phonegap.com/1.0/network"/>
<!-- Deprecated plugins element. Remove in 3.0 -->
</widget>
采纳答案by sunil
Add these lines to your config.xml file
将这些行添加到您的 config.xml 文件中
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<gap:plugin name="com.phonegap.plugin.statusbar" />
回答by JazzCat
The accepted answer from sunil is no longer relevant, the plugin is deprecated.
sunil 接受的答案不再相关，该插件已被弃用。
Use the following in your config.xml
在 config.xml 中使用以下内容
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<plugin spec="https://github.com/apache/cordova-plugin-statusbar.git" source="git" />
回答by 404
This can be accomplished with the help of the statusbar plugin.
All you need is to install the plugin via the command line phonegap plugin add https://github.com/apache/cordova-plugin-statusbar.gitand then add StatusBar.hide();onDeviceReady event.
这可以在状态栏插件的帮助下完成。您只需要通过命令行安装插件phonegap plugin add https://github.com/apache/cordova-plugin-statusbar.git，然后添加StatusBar.hide();onDeviceReady 事件。
回答by Alfred Huang
For detail usage in codova 6+ now, for more of @sunil's solution, we should use
对于现在在 codova 6+ 中的详细用法，对于@sunil 的更多解决方案，我们应该使用
cordova plugins add -save cordova-plugin-statusbar
For detail usage: https://www.npmjs.com/package/cordova-plugin-statusbar
详细用法：https: //www.npmjs.com/package/cordova-plugin-statusbar
回答by Abbas Mulani
Applied @sunil resolution but,
应用@sunil 分辨率但是，
My problem was of "Content Security Policy" on iOS 10
我的问题是 iOS 10 上的“内容安全策略”
Added below line to index.html resolved the issue:
将以下行添加到 index.html 解决了该问题：
<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
回答by Sithys
If you want to hide the StatusBar totaly you can add two keys into your info.plistwhich are Booleans:
如果你想完全隐藏状态栏，你可以在你info.plist的布尔值中添加两个键：
Status bar is initially hidden - YES
View controller-based status bar appearance - NO
回答by Lakshay Sharma
add these lines in config.xmluse this it will fix your issue and status bar get appear:
在config.xml使用中添加这些行，这将解决您的问题并出现状态栏：
<preference name="StatusBarOverlaysWebView" value="true"/>
<preference name="StatusBarBackgroundColor" value="#000000"/>
<preference name="StatusBarStyle" value="lightcontent" />
