Android Web App：位置：固定坏了？答案

【问题标题】：Android Web App : Position:fixed broken?Android Web App：位置：固定坏了？
【发布时间】：2010-05-06 22:15:39
【问题描述】：

我正在为手机开发一个 Web 应用程序。一世使用 Web 应用程序，因为对我来说这似乎是一个成功的局面必须开发一个也可以在 iPhone 上运行的应用程序 / Windows Mobile / Palm 等

在做了几天的概念、想法和想法后，我今天开始测试设计，我想做的是有一个菜单页面底部。和这款 iPhone 底部的菜单一模一样应用截图：

使用 CSS，我认为这很容易做到。仅使用位置：固定；底部：0；会成功的，但我发现它在移动浏览器上的行为不一样

我试图将我的页面分成 2 个部分：1 将是一个可滚动的 div （对于内容），另一个是底部菜单。可滚动的 div 也不适用于 Android。我也尝试过使用框架也没有运气。有谁知道重新创建菜单的任何方法会粘在手机页面的底部？

【问题讨论】：

【解决方案1】：

在我的带有 CyanogenMod 的 Android N1 上，我也遇到了这个问题，并且修复了：

   <meta
     name="viewport"
     content="width=100%,
     initial-scale=1,
     maximum-scale=1,
     minimum-scale=1,
     user-scalable=no"/>

具体是user-scalable=no;部分，也可以用0代替no。

有趣的是，这会破坏 androids 对按钮的渲染，但您所要做的就是为按钮设置背景颜色。

【讨论】：

我在许多使用 user-scalable=no 的设备上遇到了很多问题。使用它时，我注意到选择框变得完全无法使用。
请注意，视口元内容属性的正确语法使用逗号分隔值，而不是分号。
不幸的是，我对上述评论的修改建议被拒绝了。由于似乎对这一点存在疑问，这里有一个reference to the specification，其中指出“作者应该使用逗号以确保内容在所有 UA 中按预期工作”。

【解决方案2】：

只需添加：

<meta name="viewport" content="width=device-width, user-scalable=no" />

到该页面，您就可以使用 Android 2.2+。这适用于我在手机上测试的页面。来源：When can I use CSS position:fixed?

【讨论】：

【解决方案3】：

【讨论】：

【解决方案4】：

刚刚在我的 HTC Desire 上升级到 Android 2.2 (Froyo)，我很高兴地说，固定位置现在可以工作了，至少当您使用视口元标记设置初始比例和宽度时。不过，似乎仍然无法在常规网页上运行。

【讨论】：

【解决方案5】：

我确认在您的 html 标头中使用元名称

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

在 Android 2.2、2.3 及更高版本上，您将有一个固定的 div 用于垂直和水平滚动和 iOS 4 及更高版本。我在这里做了一个例子： https://dl.dropbox.com/u/908148/website/test-scroll.html

【讨论】：