0

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

位置：固定“工作”，如果我在移动设备上向下滚动，顶部栏保持可见。问题在于当我按下应用程序中的按钮时，此栏会随机下降（屏幕中心）。这个问题在 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;
    }
4

2 回答 2

1

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

于 2013-03-14T18:10:05.740 回答
0

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

于 2013-03-25T22:48:43.523 回答