Phonegap Cordova Statusbar插件创build双条

我正在使用手机上的应用程序。 通过CLI构build，而不是手机构build。 我遇到了cordova-plugin-statusbar插件的问题。 它会打开时添加一个额外的酒吧高度。 这是它的样子。

双高度菜单栏：

我已经用两种方式实现了状态栏。 首先通过添加标签到config.xml

<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> <preference name="StatusBarStyle" value="default" /> <preference name="StatusBarBackgroundColor" value="#000000" /> </platform> 

我也做了这个与JavaScript，（通过首先删除configuration标签），并添加以下到我的DeviceReady函数

 StatusBar.overlaysWebView( false ); StatusBar.backgroundColorByHexString('#000000'); StatusBar.styleDefault(); 

要看看发生了什么，我已经改变了颜色，我得到了这个

双状态栏2种颜色：

当我删除一切或设置overlaysWebView为'真'，我没有间距，我的内容是在菜单栏下。

 StatusBar.overlaysWebView( true ); 

这导致我相信我没有CSS问题。 另外，我经历了我的CSS，没有看到任何会增加这一点。 我的CSS是非常基本的。

 /* Style Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* End of style reset */ * { -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ } body { -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ /* background-color:#E4E4E4; background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4) ); background-attachment:fixed;*/ font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; font-size:12px; /* height:100%; margin:0px; padding:0px; text-transform:uppercase; width:100%;*/ background-color: #333333; } .md-button { color:#DFE5E6; background-color:#1D1D1D; } .md-button[disabled] { border: 1px solid black; color : rgba(0, 0, 0, 0.26); background-color: transparent; } /* Portrait layout (default) */ .app { background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */ position:absolute; /* position in the center of the screen */ left:50%; top:50%; height:50px; /* text area height */ width:225px; /* text area width */ text-align:center; padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */ margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */ /* offset horizontal: half of text area width */ } /* Landscape layout (with min-width) */ @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { .app { background-position:left center; padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */ margin:-90px 0px 0px -198px; /* offset vertical: half of image height */ /* offset horizontal: half of image width and text area width */ } } /* Custom Fonts */ @font-face { font-family: "sapient_sans_regular"; src: url("../fonts/sapient_sans_regular.TTF") format("opentype"); } @font-face { font-family: "sapient_sans_regular_italic"; src: url("../fonts/sapient_sans_regular_italic.TTF") format("opentype"); } @font-face { font-family: "sapient_sans_bold"; src: url("../fonts/sapient_sans_bold.TTF") format("opentype"); } @font-face { font-family: "sapient_sans_bold_italic"; src: url("../fonts/sapient_sans_bold_italic.TTF") format("opentype"); } .material-icons { margin:0px; color:white; height:40px; width:40px; line-height:40px; vertical-align: middle; text-align: center; background: #1D1D1D; } .material-icons.md-menu-item.md-icon { text-align: left; } .material-icons.menuItem { background: transparent; color:#DFE5E6; } #menuBar ul { position:fixed; top:0; width:100%; list-style-type: none; background-color: #1D1D1D; } #menuBar li { text-align:center; display: inline; } .logo { line-height:11px; padding:13px 2px; display: inline-block; vertical-align: middle; //float:left; //margin: auto; overflow: auto; width:100%; background-color: #1D1D1D; border-bottom: 1px solid white; } .my { //line-height:40px; text-transform: capitalize; font-family: "sapient_sans_bold"; //display: inline-block; font-size:20px; color: #DFE5E6; } .company { //line-height:40px; text-transform: capitalize; font-family: "sapient_sans_bold"; font-size:20px; color: #6D6E70; } #menuListing ul { list-style-type: none; margin: 0; padding: 0; width: 100%; background-color: #f1f1f1; } #menuListing li a { font-family:'sapient_sans_regular'; display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* Change the link color on hover */ #menuListing li a:hover { background-color: #555; color: white; } .content { color: white; padding:10px; } h1 { font-size:18px; font-weight:normal; //margin:0px; //overflow:visible; //padding:0px; //text-align:center; } .hidden { display: none; } #map { //margin: auto; //width: 100%; border: 3px solid green; padding: 100px; //height: 90%; //width: 60%; } 

我已经尝试卸载并重新安装插件和ios平台，没有改变的问题。

我已经在多个IOS模拟器（不同的手机）上testing过，并且都有相同的结果，我还没有直接在设备上进行testing，但是我怀疑它会有所不同。

我注意到，android也有一个状态栏缓冲区（即使它不应该），但它只是一个单一的白色栏。 我假设会提示CSS，但是当我运行时我没有在浏览器中看到这个

phonegap服务

快速更新：我正在从statusBarrest，并努力让我的谷歌地图插件也工作，我做了一些改变，状态栏似乎正在工作。 一定有某种互动。 去看看我能弄清楚究竟是什么。

一些HTML供参考Index.html

 <!DOCTYPE html> <html ng-app="snApp"> <head> <title>My Test App</title> </head> <!-- Actual Content --> <body ng-cloak> <div ng-include="'app/menuBar/menuBar.html'"></div> <!-- Main content Area --> <md-content flex id="main"> <ng-view></ng-view> </md-content> </body> </html> 

MenuBar.html（注意，我已经从这个原始发布进行了一些调整，我试图恢复它们。）

 <div ng-controller="menuBarController as menuBarController" id="menuBarContainer"> <md-toolbar id="menuBar" class="md-short" layout="row"> <div class="menuButton"> <md-icon ng-click="menuBarController.toggleLeftMenu();" md-font-library="material-icons">menu</md-icon> </div> <div class="logo"> <span class="my">My</span><!-- this removes the space (for some reason) --><span class="app">App</span> </div> </md-toolbar> <md-sidenav md-component-id="left" class="md-sidenav-left" > <md-menu-item> </md-menu-item> <!-- remove this after adding in the buffer --> <md-menu-item> <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/"> <md-icon md-font-library="material-icons" class="menuItem">home </md-icon> Home </md-button> </md-menu-item> <md-menu-item> <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/locations"> <md-icon md-font-library="material-icons" class="menuItem">location_city </md-icon>Locations </md-button> </md-menu-item> <md-menu-item> <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/map"> <md-icon md-font-library="material-icons" class="menuItem">map </md-icon>Map </md-button> </md-menu-item> <md-menu-item> <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/navigate"> <md-icon md-font-library="material-icons" class="menuItem">navigation </md-icon>Navigate </md-button> </md-menu-item> <md-menu-item> <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/about"> <md-icon md-font-library="material-icons" class="menuItem">info </md-icon>About </md-button> </md-menu-item> </md-sidenav> </div> 

用于MenuBar的控制器

 console.log("menuBar.controller.js file loaded"); snApp.controller('menuBarController', ['$mdSidenav', '$window', MenuBarController]); function MenuBarController($mdSidenav, $window) { var vm = this; // vm.operatingSystem = $window.operatingSystem; vm.operatingSystem = null; vm.toggleLeftMenu = toggleLeftMenu; vm.checkForIos = checkForIos; function toggleLeftMenu() { $mdSidenav('left').toggle(); } } 

查看示例 – Home.html页面是非常简单的，现在进行testing：

 <!-- home.html --> <div class="content" ng-controller="HomeController as home"> <h1>Home Page</h1> <p>{{ home.message }}</p> </div> 

home.controller.js

 console.log("home.controller.js file loaded"); angular.module('snApp') .controller("HomeController", HomeController); function HomeController() { //debugger; var vm = this; vm.message = "this is a home message"; } 

map.html – 这里是地图视图 – 很多内容仅用于testing。

 <!-- map.html --> <div class="content" ng-controller="MapController as map"> <h1>Map Page</h1> <md-content layout-gt-sm="row" layout-padding> <md-button ng-click="map.setMapToDiv();">show map</md-button> <md-button ng-click="map.getLocation();" ng-disabled="map.buttonDisabled">{{ map.buttonText }}</md-button> <md-input-container> <label>Div Adjustent</label> <input ng-model="map.divAdjustment"> </md-input-container> <md-button ng-click="map.adjustDiv();" > Adjust Div Height </md-button> <p></p> <p>For testing - buttonEnabled value: <span ng-bind="map.buttonDisabled"></span></p> <p>{{ map.latitude }}</p> <p>{{ map.longitude }}</p> <p>{{ map.message }}</p> <p></p> <md-button ng-click="map.showMapDialog();">make map full screen</md-button> <!-- <div id="map" ng-show="map.locationUpdated"> --> <div id="map" ng-show="true"></div> </md-content> </div> 

map.controller.js

  console.log("map.controller.js file loaded"); angular.module('snApp') .controller("MapController", ['$scope', MapController]); function MapController($scope) { // Variables var vm = this; vm.latitude = 0; vm.longitude = 0; vm.locationUpdated = false; vm.buttonTextDefault = "Get Location"; vm.buttonText = vm.buttonTextDefault; vm.buttonDisabled = false; vm.divAdjustment = 0; vm.message = "Map will display after getting Geolocation"; // Method Declarations vm.getLocation = getLocation; vm.setMapToDiv = setMapToDiv; vm.showMapDialog = showMapDialog; // vm.adjustDiv = adjustDiv; // Gets the Current Geolocation for user function getLocation() { vm.buttonDisabled = true; vm.buttonText = "Working..."; var options = { maximumAge: 0, timeout: 10000, enableHighAccuracy: true }; navigator.geolocation.getCurrentPosition(getLocationSuccess,getLocationError,options); vm.buttonDisabled = false; } function getLocationSuccess(position) { console.log("found geolocation"); vm.latitude = position.coords.latitude; vm.longitude = position.coords.longitude; vm.buttonText = vm.buttonTextDefault; googleMaps.positionMapToCoords(vm.latitude, vm.longitude); vm.locationUpdated = true; $scope.$apply(); } function getLocationError(error) { console.log("Error finding geolocation"); alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); vm.buttonText = vm.buttonTextDefault; $scope.$apply(); } function setMapToDiv() { googleMaps.setMapToDiv(); } function showMapDialog() { googleMaps.showMapDialog(); } } 

Answer 1

如果有人碰到这个，有相同的问题。 我基本上find了一个解决scheme，而不是一个直接的答案，但可能会有所帮助。 我决定仍然使用插件正确着色文本，但其余的我手动pipe理。

  StatusBar.overlaysWebView(true); StatusBar.backgroundColorByHexString('#1D1D1D'); StatusBar.styleLightContent(); 

然后一些CSS

 #statusBar { background-color:#1D1D1D; width:100%; min-width:100%; overflow: auto; min-height:20px; height:20px; } 

我有这个div作为我的菜单栏的一部分。 菜单栏是它自己的angular度组件。 在控制器中，我有一个检查操作系统版本的方法。 感谢这篇文章： 检测iOS / Android操作系统

 snApp.controller('menuBarController', ['$mdSidenav', '$window', '$googleMapsService', MenuBarController]); function MenuBarController($mdSidenav, $window, $googleMapsService) { var vm = this; var leftMenuId = 'left'; vm.isIosValue = false; vm.$onInit = function() { vm.isIosValue = vm.checkForIos(); } vm.operatingSystem = null; vm.toggleLeftMenu = toggleLeftMenu; vm.getMobileOperatingSystem = getMobileOperatingSystem; vm.checkForIos = checkForIos; vm.isIos = isIos; vm.googleMaps = $googleMapsService; function toggleLeftMenu() { mapDivManagement(); $mdSidenav(leftMenuId).onClose(mapDivManagement).toggle(); } function mapDivManagement() { if(vm.googleMaps.checkMap() && $window.location.hash == "#/map") { if($mdSidenav(leftMenuId).isOpen()) { console.log("vm.googleMaps.revealMap(true);"); vm.googleMaps.revealMap(true); } else { console.log("vm.googleMaps.revealMap(false);"); vm.googleMaps.revealMap(false); } } } /** * Determine the mobile operating system. * This function sets global variable to one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} * * Source: https://stackoverflow.com/questions/21741841/detecting-ios-android-operating-system */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; //debugger; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { // return "Windows Phone"; vm.operatingSystem = "Windows Phone"; } else if (/android/i.test(userAgent)) { // return "Android"; vm.operatingSystem = "Android"; } // iOS detection from: https://stackoverflow.com/a/9039885/177710 else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { // return "iOS"; vm.operatingSystem = "iOS"; } else { vm.operatingSystem = "unknown"; } // return "unknown"; } function checkForIos() { vm.getMobileOperatingSystem(); //vm.operatingSystem = $window.operatingSystem; if(vm.operatingSystem == 'iOS') { return true; } else { return false; } } function isIos() { return vm.isIosValue; } } 

最后，在我的menubar.html文件中，我有这个div：

  <!-- Status Bar --> <div ng-show="menuBarController.isIos()" id="statusBar"></div> 

这将显示或隐藏基于操作系统的div。

不知道这将如何在一个电话中工作，但它会让你相差甚远。