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

我正在为我的学校开发基于Web的应用程序，并使用媒体查询来定位不同的屏幕尺寸。掌上电脑和桌面版本看起来不错。但是，当使用移动设备时，每次点击应用程序中的按钮时，顶部栏会瞬间消失。在移动设备上测试我的基于Web的应用程序时，CSS固定顶栏不断下降

位置：固定“作品”，如果我在移动设备上向下滚动，顶部栏保持可见。这个问题包含在这个按钮中，当我按下应用程序中的按钮时，这个按钮随机向下（屏幕中心）。这个问题在iO6和android4上持续存在。

这里是应用程序的屏幕拍摄时，酒吧来登录按钮被按下后降权： enter image description here

这里是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; 
    }

来源

2013-03-13 irm

没有一个例子来看看它很难说，但它可能是与你已经申请的position：fixed相关的。 – John 2013-03-13 21:49:06

这里是它的链接。 http://as.sjsu.edu/vaishak/swpIndex.jsp – irm 2013-03-14 18:05:22

位置：固定不支持大多数移动浏览器。像iOS6和android4这样的现代操作系统也支持它。 - >捕捉滚动事件，并重新定位元素，如果浏览器不支持固定的（使用Modernizr来检查）

来源

2013-03-14 18:10:05 japrescott

此网站包含对移动固定定位以及解决方案问题的广泛研究问题http://bradfrostweb.com/blog/mobile/fixed-position/

来源

2013-03-25 22:48:43 irm

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

回答

相关问题