Question

我有一个div，我想在移动浏览器（Safari + Android）视口的底部定位。目前我的div固定在Windows（IE，FF，Saf，Chrome，Opera）上所有前5个浏览器的底部，但这是“浏览器窗口”，而不是“视口”。

在移动设备上（到目前为止我只尝试使用Android 2.2的三星Galaxy Tab），div显示在页面底部，但是如果你捏/打入放大，固定的div不会跟随。它留在视口之外。

我专门使用position：fixed和bottom：0 CSS属性来保持位置，正如我所说，它在非触摸浏览器上工作正常。

我是否必须通过挂钩触摸移动事件并查看（a）缩放级别（b）来将div保持在我希望的位置（在视口的底部））视口位置，以及（c）滚动位置？

我正在使用JavaScript将div注入页面而不是使用内联CSS。好消息是我不必担心怪癖模式（因为我只针对Webkit浏览器），所以这是一件好事。

我无法设置doctype，使用内联CSS或内联DIV。必须通过JavaScript动态添加所有内容。这是我到目前为止在测试中所做的：

var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";

Answer 1

您的position:fixed无法在移动网络套件浏览器上使用。请查看the mobile webkit fixed position problem上的http://www.position-absolute.com/。他们有几种方法可以保持底层。

Answer 2

查看 iScroll ：
http://cubiq.org/iscroll-4

这似乎是更好的选择之一 - 绝对值得研究。

我使用过以前版本的iScroll，但不幸的是有些东西没有达到标准，所以我们不得不放弃这个想法。然而，Cubiq的人刚刚发布了iScroll v4，它承诺修复了之前版本中的许多问题。

祝你好运！
丹

尝试将div放在移动视口的底部，而不是底部的浏览器

2 个答案: