为什么我的 jQuery Mobile 应用程序无法在 Android 4.0.3 浏览器中正确显示？答案

【问题标题】：Why does my jQuery Mobile app not show correctly in the Android 4.0.3 browser?为什么我的 jQuery Mobile 应用程序无法在 Android 4.0.3 浏览器中正确显示？
【发布时间】：2023-04-05 10:28:01
【问题描述】：

我有一个 jQuery Mobile (1.1.0) 应用程序在使用 Chrome、FF、Mobile Safari 和 Android 2.2 上的浏览器查看时正在运行。但是，在 Android 4.0.3 模拟器的浏览器中查看时，会出现一系列问题。

这些包括：

1) 标题栏不显示（它在节目中短暂显示，然后消失 - 固定页脚很好）。

2) 页面上的按钮未显示 - 但仍能正确接收和处理点击事件。

这也发生在同事的 ICS Android 手机 (Galaxy Nexus) 上。

标记对于 jQM 来说都是相当标准的。例如，主要按钮是标签。标题是：

<header data-role="header">
    <h1 data-bind="text: theTitle"></h1>

    <a id="waitButton" href="#" class="ui-btn-left" data-bind="click: wait">Wait</a>
    <a id="pollButton" href="#" class="ui-btn-right" data-bind="click: poll">Poll</a>
</header>

[数据绑定属性用于 Knockout.js]

有谁知道我需要改变什么才能让它在 ICS 上运行？或者这是 jQuery Mobile 的“正在进行中的工作”？

【问题讨论】：

标签： android jquery-mobile android-4.0-ice-cream-sandwich

【解决方案1】：

发现问题。这是我在 iOS 测试期间添加的 css 规则：

.ui-page 
{
    /* Supposed to reduce flickering, but screwed up Ice Cream Sandwich. */
    -webkit-backface-visibility: hidden;
}

【讨论】：

刚刚让我头疼得厉害。升级到 JqueryMobile 1.1 和 android 坏了。为旧的 JQM 添加了 css sn-p 以修复 Android 上的闪烁问题。它不再需要并且实际上破坏了它。

【解决方案2】：

确认。

将 Galaxy 10.1 标签从 3.2 升级到 4.0.3。 JQM 1.1 页面未加载，显示大部分为空白页面，并且没有标题。

上面的解决方案解决了所有这些问题。性能似乎也有所提高。但是，我们的页面不使用过渡。

顺便说一句，输入 type="date" 将正确激活本机日期选择器。 type="number" 将允许小数点应该有，这在 3.2 上不起作用。

【讨论】：

【解决方案3】：

在寻求救赎之后..我发现了一些对我有帮助的东西..

我补充说：

-webkit-transform: translate3d(0,0,0);
-webkit-transform: translateZ(0px);

到<div data-role=content ..>，它解决了问题！

尽管 jQuery 的弹出窗口仍然存在问题，尽管它的 z-index 很高，但它隐藏在其他元素下。

【讨论】：