在Samsung Android浏览器上启用真正的固定定位

Mr.*_* 安宇 25 css android webkit css-position samsung-mobile

自2.2以来,Android浏览器支持固定定位,至少在某些情况下,例如关闭缩放时.我有一个没有JS的简单HTML文件,但我试过的三部三星手机的固定定位是完全错误的.不是真正的固定定位,标题滚动出视图,然后在滚动完成后弹回原位.

对于我测试过的任何配置,Android SDK仿真器都不会发生这种情况(2.2,2.3,2.3 x86,4.0.4).在三星手机上的应用程序中使用WebView时也不会发生这种情况:在这些情况下,定位按预期工作.

有没有办法让三星Android"股票"浏览器使用真正的固定定位?

我测试过:1.三星Galaxy 551,Android 2.2 2.三星Galaxy S,Android 2.3 3.三星Galaxy S II,Android 2.3

示例代码:

<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>
Run Code Online (Sandbox Code Playgroud)

预期的行为是灰色标题填充屏幕的顶部,无论你滚动多少,都会保持不变.在三星Android浏览器上,它似乎滚动出视图,然后在滚动完成后重新弹回到位,好像使用Javascript模拟固定定位,但事实并非如此.

编辑 根据评论和"答案"判断,似乎我不清楚我需要什么.我正在寻找一个元标记或css规则/黑客或javascript切换,关闭三星的破碎固定位置,并打开Android浏览器的工作固定位置.我不是在寻找一个Javascript解决方案,它将破坏的固定定位添加到没有任何支持的浏览器中; 三星固定定位已经做到了,它只是看起来很愚蠢.

小智 1

也许您可以考虑一种不需要固定定位的不同方法......

添加滚动到段落元素而不是(默认)主体元素。然后,您可以将段落元素放置在标题的正下方。这将确保标题始终显示在页面顶部,同时允许您滚动浏览段落中的文本。

h1 {
   height: 20px;
}

p {
  position: absolute;
  top: 20px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
}
Run Code Online (Sandbox Code Playgroud)

  • 这可能有用。但是,我听说滚动文档的一部分而不是整个文档时,滚动性能要慢得多。不管怎样,我使用的是 jQuery Mobile,所以我在文档结构上没有太大的灵活性。 (2认同)