2

概括：

我一直在为客户开发一个移动 Web 应用程序，一切都很顺利，直到 Android 更新似乎毁了一切。网页现在呈现为好像窗口/主体（DOM 元素）高度远小于实际屏幕高度。这种理论的原因是页面是围绕绝对定位的元素构建的，因此元素bottom: 0应该定位在页面的底部（除非父级当然是相对的，但事实并非如此）。

该问题似乎仅在设备使用特定版本的 WebKit 时出现（到目前为止，该问题仅在 Android 设备上发现）。更具体地说，在版本 534.13 到 534.30 之间（请参阅下面的调试部分）

关于布局：

该站点使用绝对定位元素将页眉和页脚内容附加到屏幕的顶部和底部。jQuery(window).load() 事件用于计算bottom和top数字，以便相对于每个元素正确定位元素。

我知道该网站并不完美，无需提及（我是移动优化网站的新手，并没有质疑他们的想法）。

查看当前的实现：http: //v-tone.com/（注意：此问题不是为了网站访问或任何个人利益。页面也可以随时更改）

问题：

可以通过向您展示一个工作和不工作的例子来最好地说明这个问题：

工作：http ://www.kjetil-hartveit.com/_misc/vtone/working.jpg

不工作：http ://www.kjetil-hartveit.com/_misc/vtone/notworking.jpg

如您所见，该实现在 Android 2.2 中有效，但在新的 4.0.3 中无效。

调试：

我一直在使用 jsconsole.com（远程调试）和控制台日志记录以及诸如此类的东西进行调试，但没有发现工作和错误渲染站点之间的尺寸和计算有任何显着差异。

我还使用 webkit 和其他渲染引擎测试了几种不同的实现，以试图解决问题。结果表明 WebKit 版本534.13和534.30之间可能存在一些错误。

您可以在此处查看所有测试数据：http ://www.kjetil-hartveit.com/_misc/vtone/Render%20comparison.xlsx （再次注意，此链接可能随时停止存在）

解决方案？

我的客户真的希望网站尽快启动，我也是。我们不确定等待可能的 Android 更新是否值得。

  • 有谁知道快速解决这个问题？
  • 谁能确认这是 WebKit 问题？
  • 其他建议？
4

1 回答 1

3

我在带有 Android 操作系统的三星 Galaxy S3 上使用 WebKit 534.30 时遇到了同样的问题。

我使用 CSS3 制作了一个手风琴菜单。

<div class="wrapper">
 <ul class="accordion">
  <li>
   <button>Button Caption</button>
   <div>
    <p>Some Information</p>
   </div>
  </li>
 </ul>
 <footer>Some information in footer</footer>
</div>

点击按钮后，li 元素使用纯 JavaScript 更改其高度（= 按钮高度 + div 高度）。问题是打开的 li 元素与页脚元素内容重叠。

我提出的解决方案是将 translate3d 和 scale(1) 添加到每个交互元素中：

.wrapper {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}
.accordion > li {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}
.accordion > li > button {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}

然后，即使在 webkit 534.30 中，手风琴菜单也开始正常工作。

于 2012-09-10T12:42:40.907 回答