在移动设备上测试基于 Web 的应用程序时，CSS 固定顶部栏不断下降

Question

我正在为我的学校开发一个基于网络的应用程序，并使用媒体查询来针对不同的屏幕尺寸。手持和桌面版本看起来很棒。 但是，在使用移动设备时，每次我点击应用程序中的按钮时，顶部栏都会立即下降。

Position:fixed “有效”，如果我在移动设备上向下滚动，顶部栏仍然可见。问题在于，当我在应用程序中按下按钮时，此栏会随机下降(屏幕中央)。此问题在 iO6 和 android4 上仍然存在。

这是按下登录按钮后栏立即下降时应用程序的屏幕截图:

这是我为酒吧准备的 CSS:

桌面 CSS:

#user_session_box{
    color: #444444;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 10pt;
    min-height: 33px;
    text-align: right;
    margin: 0 -15px 0 -5px;
    box-shadow: 1px 3px 19px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 1px 3px 19px rgba(0, 0, 0, 0.2) inset;
    -webkit-box-shadow: 1px 3px 19px rgba(0, 0, 0, 0.2) inset;
    }

手持/平板电脑CSS:

#user_session_box {
    width: 100%;
    min-height: 45px;/*Must be px to display bg image properly */
    text-align: center;
    padding-right: 30%;/*Android will murder logout button if padding less than 30%*/
    color: #FFF;
    font-size:16pt;
    font-weight: bolder;
    background-image:url(../../images/bluebar7.png);
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0px;/*Overwrites desktop margins*/
    box-shadow: none;/*overwrites shadows on desktop version*/
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    }

Answer 1

position:fixed 不被大多数移动浏览器支持。然而，像 iOS6 和 android4 这样的现代操作系统确实支持它。 -> 如果浏览器不支持 fixed(使用 Modernizr 检查)，则捕获滚动事件并重新定位元素