Question

所以，我正在使用Framework7和Framework7的Vue插件构建一个使用Material Design的PhoneGap应用程序。我遇到的问题是，当我在iPhone上使用开发者应用程序进行预览时，它会将应用程序内容加载到具有白色背景的实际状态栏下方。如果我添加背景颜色它什么都不做。但是，如果我使用url(...)添加平铺图像作为背景，则会显示状态栏后面的图像...

问题是我的<f7-navbar>正在设备状态栏下面呈现，所以如果我添加它就只有空白区域或前面提到的图像（我不打算使用图像，只是在尝试时注意到它把这个想出来（解决;计算出;弄明白）。然后，如果我使用<f7-statusbar>，它会覆盖设备状态栏下方，但会覆盖我的导航栏。我已经尝试过以下几点无法辨别的内容：

安装了Cordova StatusBar插件（已经安装），StatusBar.overlaysWebView设置为true（在config.xml和带有deviceready的脚本中都尝试过）
https://stackoverflow.com/a/41187519/6867420
https://stackoverflow.com/a/43435086/6867420

有问题的HTML如下所示：

<body>
    <div id="app">
      <f7-statusbar></f7-statusbar>
      <f7-views navbar-fixed layout="dark" theme="red">

提前致谢！

编辑：我忘了包含我的CSS：

 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-image:linear-gradient(top, #f44336 0%, #f44336 51%);
       #background-image:-webkit-linear-gradient(top, #f44336 0%, #f44336 51%);
       #background-image:-ms-linear-gradient(top, #f44336 0%, #f44336 51%);
       #background-image:-webkit-gradient(
           linear,
           left top,
           left bottom,
           color-stop(0, #f44336),
           color-stop(0.51,#f44336)
       );
    background: #f44336;*/
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:3em;
    height:100vh;
    margin:auto;
    text-transform:uppercase;
    text-shadow: 2px 2px 5px black;
    width:100%;
    display: flex;
    align-items: stretch; 
}

.app {
            flex: 1;
            position:inherit;             /* position in the center of the screen */
            left:0;
            top:0;
            height:100vh;                   /* text area height */
            width:100%;                   /* text area width */
            text-align:center;
        /*    #padding:0.2vmin;  */   /* image height is 200px (bottom 20px are overlapped with text) */
            margin:0;  /* offset vertical: half of image height and text area height */
                                           /* offset horizontal: half of text area width */

    }

此外，以下类似的问题无法解决我的问题：Phonegap Cordova Statusbar Plugin creating double bars

编辑2 ：我注意到日志中隐藏了以下错误，我相信它已存在，我现在才注意到它（我想其中一件事）：

Error: exec proxy not found for :: StatusBar :: _ready

知道怎么解决吗？似乎是phonegap githubs上的一个常见问题，但我还没有看到一个可靠的解决方案......

PhoneGap w / Framework7 + Vue正在加载应用程序内容以下StatusBar

0 个答案: