带有framework 7 css的cordova应用程序在各种android设备上的工作方式不同

Posted 2023-05-06

【中文标题】带有framework 7 css的cordova应用程序在各种android设备上的工作方式不同

【英文标题】：cordova app with framework 7 css work different at various android devices

【发布时间】：2018-02-26 18:33:54

【问题描述】：

使用框架 7 开发 Cordova android 应用程序，我将底部栏创建为音乐播放器，底部栏顶部添加歌曲进度条。

要在顶部添加进度条 div，我使用 CSS 属性 -position: absolute。它在我的设备和我测试的许多其他设备上显示良好，但一些 Android 设备面临一些问题，例如底部栏中间显示的歌曲进度条。

<div class="views pageview">
  <div class="view view-main">
    <div class="toolbar toolbar-bottom hidden-toolbar" id="buttomBar" style="opacity: 0;height: 80px;">
      <div class="toolbar-inner">
        <div class="myProgress2" id="myProgress2" style="background-color: grey; width:100%;position: absolute!important;">
          <div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:#00bcd4;"></div>
        </div>
        <div class="list-block" id="songname" onclick="showToolbar();">
          <a href="#" class=" size-30 item-link smart-select">
            <select name="fruits" id="tracklistappend" onchange="getAudioUrl(this)">
            </select>
            <div class="item-content">
              <img src="img/pula.jpg"   id="trackimage">
              <div class="item-inner">
                <div class="item-title" id="trackNameNclipName"></div>
              </div>
            </div>
          </a>
        </div>
        <span style="margin-left: 2px;" id="duration"></span>
        <a onclick="playButton()" class="link size-50 left" id="play"><i class="fa fa-play-circle" aria-hidden="true"></i></a>
        <a onclick="puseButton()" class="link size-50 left" id="pause"><i class="fa fa-pause-circle" aria-hidden="true"></i></a>
      </div>
    </div>
    <div class="pages">
      <div data-page="index" class="page no-navbar no-toolbar navbar-hidden toolbar-hidden hide-toolbar-on-scroll">
        <div class="page-content landingpage">
          <div class="content-block" style="height:60px;"></div>
          <div class="logo main col12"> <img src="img/bplogo.png" > </div>
        </div>
      </div>
    </div>
  </div>
</div>

其他 android 设备如三星 j2 进度条显示如上

在我的设备顶部显示的进度条上

【问题讨论】：

您能否编辑您的问题以列出您正在测试的设备、它们的 Android 操作系统版本以及每个设备正在运行的 Chromium WebView 版本。

我认为大多数 android 6.0 和更高版本的设备都显示在底部栏中间的进度条。 android 4.4 到 5.1 显示正常

我根据以下要求提供设备/Android OS 版本/Chrome WebView 版本：developer.chrome.com/multidevice/webview/overview 来自 Android 5.0 及更高版本的 WebView 可以从 Play 商店更新，因此 5.1 的分歧似乎很奇怪我。您是否尝试过在 Android developers.google.com/web/tools/chrome-devtools/… 上进行 Chrome 远程调试以查看发生了什么？ （注意 Android Studio 和 Chrome 都有自己的 adb 服务器，一次只能运行一个 adb 服务器）

你说的是“com.Something.app (39.0.0.0) 中的 WebView” ???

是的。如果您在“设置”中查看，它将是应用程序“Android System WebView”的版本号（在 Lollipop 及更高版本上）。相关：***.com/questions/29145884/…

【参考方案1】：

您需要为 webview 中的每个重大更改设置一致的代码。

探索每个 webview 版本的用户碎片，以确定您需要提供哪些支持。

如果您使用的是第一个版本，请尝试参考支持 webview 的 html5 和 CSS。