Android 在三星安卓浏览器上启用真正的固定定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11367806/
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
Enable real fixed positioning on Samsung Android browsers
提问by u7867
The Android browser, since 2.2, supports fixed positioning, at least under certain circumstances such as when scaling is turned off. I have a simple HTML file with no JS, but the fixed positioning on three Samsung phones I've tried is simply wrong. Instead of true fixed positioning, the header scrolls out of view then pops back into place after the scrolling is done.
Android 浏览器从 2.2 开始支持固定定位，至少在某些情况下，例如关闭缩放时。我有一个没有 JS 的简单 HTML 文件，但是我尝试过的三部三星手机上的固定定位是完全错误的。标题不是真正的固定定位，而是滚动出视图，然后在滚动完成后弹回原位。
This doesn't happen on the Android SDK emulator for any configuration I've tested (2.2, 2.3, 2.3 x86, 4.0.4). It also doesn't happen when using the WebView in an app on the Samsung phones: in those cases the positioning works as expected.
对于我测试过的任何配置（2.2、2.3、2.3 x86、4.0.4），这不会在 Android SDK 模拟器上发生。在三星手机上的应用程序中使用 WebView 时也不会发生这种情况：在这些情况下，定位按预期工作。
Is there a way to make the Samsung Android "stock" browser use real fixed positioning?
有没有办法让三星安卓“股票”浏览器使用真正的固定定位？
I've tested: 1. Samsung Galaxy 551, Android 2.2 2. Samsung Galaxy S, Android 2.3 3. Samsung Galaxy S II, Android 2.3
我测试过： 1. 三星 Galaxy 551，Android 2.2 2. 三星 Galaxy S，Android 2.3 3. 三星 Galaxy S II，Android 2.3
Sample code:
示例代码：
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height">
<style>
h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
p { margin-top: 36px; }
</style>
</head>
<body>
<h1>Header</h1>
<p>Long text goes here</p>
</body>
</html>
The expected behaviour is that the grey header fills the top of the screen and stays put no matter how much you scroll. On Samsung Android browsers it seems to scroll out of view then pop back into place once the scrolling is done, as if the fixed-positioning is being simulated using Javascript, which it isn't.
预期的行为是灰色标题填充屏幕顶部并且无论滚动多少都保持不变。在三星 Android 浏览器上，它似乎滚动出视图，然后在滚动完成后弹回原位，好像固定定位是使用 Javascript 模拟的，但事实并非如此。
EditJudging by the comments and "answers" it seems that maybe I wasn't clear on what I need. I am looking for a meta tag or css rule/hack or javascript toggle which turns off Samsung's broken fixed-positioning and turns on the Android browser's working fixed-positioning. I am not looking for a Javascript solution that adds broken fixed-positioning to a browser that has no support whatsoever; the Samsung fixed-positioning does that already, it just looks stupid.
编辑从评论和“答案”来看，似乎我不清楚我需要什么。我正在寻找一个元标记或 css 规则/hack 或 javascript 切换，它可以关闭三星损坏的固定定位并打开 Android 浏览器的工作固定定位。我不是在寻找一个 Javascript 解决方案，它会向不支持任何浏览器的浏览器添加损坏的固定定位；三星固定定位已经做到了，只是看起来很愚蠢。
回答by Anita Foley
Maybe you could consider a different approach that doesn't require fixed positioning...
也许你可以考虑一种不需要固定定位的不同方法......
Add scrolling to the paragraph element instead of on the (default) body element. You can then position the paragraph element just under the header. This will ensure that the header always displays at the top of the page yet allowing you to scroll through the text in the paragraph.
将滚动添加到段落元素而不是（默认）正文元素。然后，您可以将段落元素放置在标题正下方。这将确保标题始终显示在页面顶部，同时允许您滚动段落中的文本。
h1 {
height: 20px;
}
p {
position: absolute;
top: 20px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
回答by Daniel Ta
I think the best way for android 2.2 browser implement javascript.
我认为 android 2.2 浏览器实现 javascript 的最佳方式。
You can find more info via this link. It is about fixed positioning in all mobile browsers.
您可以通过此链接找到更多信息。它是关于在所有移动浏览器中的固定定位。
回答by emik
In his comment to Brad Frost's article Matthew Holloway suggests a solution along the lines of Anita Foley's answer, but with a polyfill for overflow:auto, where not supported. Check it out here:
在他对 Brad Frost 的文章 Matthew Holloway 的评论中，他提出了一个与 Anita Foley 的回答类似的解决方案，但在不支持的情况下使用了溢出的 polyfill:auto。在这里查看：
回答by George Katsanos
It's not Samsung's Android broken browser, it's Android 2.2 which has the broken support. In general as you might know position:fixed was and in some cases still is pretty broken in many mobile devices/systems.
这不是三星的 Android 浏览器损坏，而是 Android 2.2 支持损坏。一般来说，您可能知道 position:fixed 在许多移动设备/系统中曾经并且在某些情况下仍然很糟糕。
To answer to your question, there is no "toggle or meta tag" that will "turn on the Android browser's working fixed-positioning". If a browser doesn't have support of something, then there's no "toggle" to "switch" it. It's not a feature.
要回答您的问题，没有“切换或元标记”可以“打开 Android 浏览器的工作固定定位”。如果浏览器不支持某些东西，那么就没有“切换”来“切换”它。这不是一个功能。
Otherwise, you can use http://cubiq.org/iscroll-4which emulates it.
否则，您可以使用模拟它的http://cubiq.org/iscroll-4。
(edit: some facts)
（编辑：一些事实）
- According to http://caniuse.com/#search=position:fixedAndroid 2.2 and Android 2.3 have PARTIAL and not full support of position:fixed. (partial support seems buggy support)
- An Android simulator is not and will never be identical to an Android native browser, as much as IETester for example is not the same as IE native (there are differences)
- Motorola ATRIX 4G does NOT have Android 2.2 but Android 2.3 ( http://www.motorola.com/us/consumers/MOTOROLA-ATRIX%E2%84%A2-4G/72112,en_US,pd.html?selectedTab=tab-2&cgid=mobile-phones#tab)
- 根据http://caniuse.com/#search=position:fixedAndroid 2.2 和 Android 2.3 有部分而不是完全支持 position:fixed。（部分支持似乎有问题支持）
- Android 模拟器不是也永远不会与 Android 原生浏览器完全相同，例如 IETester 与 IE 原生浏览器不同（存在差异）
- 摩托罗拉 ATRIX 4G 没有 Android 2.2 而是 Android 2.3 ( http://www.motorola.com/us/consumers/MOTOROLA-ATRIX%E2%84%A2-4G/72112,en_US,pd.html?selectedTab=tab- 2&cgid=手机#tab)
You are suggesting that SAMSUNG introduces a proprietary hack or mod that breaks the otherwise working support of position fixed in the Android browser. This seems highly unlikely, regardless of the 3 above points.
您建议 SAMSUNG 引入专有的 hack 或 mod，以破坏 Android 浏览器中固定位置的其他工作支持。无论上述 3 点如何，这似乎都不太可能。
The answer is actually simple: There is partial (buggy) support and your only solution is to use a javascript library that replaces or "fixes" the hole.
答案实际上很简单：有部分（错误）支持，您唯一的解决方案是使用 javascript 库来替换或“修复”漏洞。
