Android Web App：位置：修复坏了？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2784889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Android Web App : Position:fixed broken?
提问by missaghi
I'm in the process of developping a Web Application for mobiles. I went with web applications because to me it seems a winning situation having to develop one application that could run also on iPhone / Windows Mobile / Palm etc.
我正在为移动设备开发 Web 应用程序。我选择了 Web 应用程序，因为对我来说，开发一个也可以在 iPhone/Windows Mobile/Palm 等上运行的应用程序似乎是一种成功的局面。
I started testing today after a few days of doing concepts, ideas and designs and what I wanted to do was have a menu that sticks at the bottom of the page. Exactly like the menu on the bottom in this iPhone application screenshot :
经过几天的概念、想法和设计之后，我今天开始测试，我想做的是在页面底部有一个菜单。与此 iPhone 应用程序屏幕截图底部的菜单完全一样：
Using CSS, I though it would be really easy to do this. Only using position:fixed; bottom:0; would have done the trick but I have found it doesn't behave the same on mobile browsers
使用 CSS，我认为这样做真的很容易。仅使用位置：固定；底部：0; 本来可以做到这一点，但我发现它在移动浏览器上的表现不同
I tried to split my page in 2 sections : 1 would be a scrollable div (for the content) and the other one would be the bottom menu. Scrollable divs also do not work on Android. I also tried using frames with no luck either. Does anyone know of any way to re-create a menu that would stick to the bottom of a page for mobile phones?
我试图将我的页面分成 2 个部分：1 个是可滚动的 div（用于内容），另一个是底部菜单。可滚动的 div 也不适用于 Android。我也尝试过使用框架，但也没有运气。有没有人知道有什么方法可以重新创建一个会粘在手机页面底部的菜单？
回答by missaghi
On my Android N1 with CyanogenMod i had this trouble too and the fix:
在我的带有 CyanogenMod 的 Android N1 上，我也遇到了这个问题，修复方法是：
<meta
name="viewport"
content="width=100%;
initial-scale=1;
maximum-scale=1;
minimum-scale=1;
user-scalable=no;"
/>
Specifically the user-scalable=no;part, you can also put 0instead of no.
具体的user-scalable=no;部分，你也可以把0代替no。
Interestingly this breaks androids rendering of buttons, but all you have to do is set a background color to buttons.
有趣的是，这会破坏 androids 按钮的渲染，但您所要做的就是为按钮设置背景颜色。
回答by kad81
Just add:
只需添加：
<meta name="viewport" content="width=device-width, user-scalable=no" />
to the page and you're set for Android 2.2+. This worked on a page I was testing on my phone. Source: When can I use CSS position:fixed?
到页面，您已设置为 Android 2.2+。这适用于我在手机上测试的页面。来源：我什么时候可以使用 CSS position:fixed？
回答by Lyon
This is supposed to work :) http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
这应该可以工作:) http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
回答by Anders Ekdahl
Just got an upgrade to Android 2.2 (Froyo) on my HTC Desire, and I'm happy to say that position fixed now works, at least when you use the viewport meta tag to set initial-scale and width. Still doesn't seem to work on regular web pages though.
刚刚在我的 HTC Desire 上升级到 Android 2.2 (Froyo)，我很高兴地说，位置固定现在可以工作，至少当您使用视口元标记设置初始比例和宽度时。尽管如此，似乎仍然无法在常规网页上工作。
回答by Luca Iulian
I confirm that using the meta name in your html header
我确认在您的 html 标题中使用元名称
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
you'll have a fixed div on scrolling vertical and horizontal on Android 2.2, 2.3 and up and iOS 4 and up. I made an example here: https://dl.dropbox.com/u/908148/website/test-scroll.html
在 Android 2.2、2.3 及更高版本和 iOS 4 及更高版本上，您将有一个固定的 div 用于垂直和水平滚动。我在这里做了一个例子：https: //dl.dropbox.com/u/908148/website/test-scroll.html
