0

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

问题是我<f7-navbar>在设备状态栏下方渲染，所以如果我添加它，要么只有空白，要么就是前面提到的图像（我不打算使用图像，只是在试图解决这个问题时注意到它）。然后，如果我使用 <f7-statusbar>它覆盖在设备状态栏下方但在我的导航栏上方。我尝试了以下方法，但完全没有明显效果：

  1. Cordova StatusBar 插件已安装（已安装），StatusBar.overlaysWebView 设置为 true（在 config.xml 和带有 deviceready 的脚本中都尝试过）

  2. https://stackoverflow.com/a/41187519/6867420

  3. 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 状态栏插件创建双栏

编辑 2：我注意到日志中隐藏了以下错误，我认为该错误一直存在，我现在才注意到它（我想是其中之一）：

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

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

4

0 回答 0