Question

我正在使用修改后的960网格构建响应式网站：

@media only screen and 
(min-width: 720px) and (max-width: 959px){

.container_12{
  margin-left: auto;
  margin-right: auto;
  width: 720px;
}
}

以及使用position：fixed的导航栏将其自身锁定到页面顶部。

.nav-band{
    width: 100%;
    font-weight: bold;
    position: fixed;
    z-index: 3;
    overflow: hidden;
    background-image:url('../img/trans_black.png');
    padding: 2px;
}

这在大多数情况下工作正常，但它在我的Android平板电脑上打破。该页面加载并正常工作，但是当我旋转平板电脑（将所有标签从.container_12从宽度：720px更改为宽度：480px）时，导航栏会消失或被锁定在奇怪的位置，在页面的一半处。我怎样才能解决这个问题？该网站还有一个图像显示在.header-band中的导航栏后面：

.header-band{
    background-image:url('../img/header_band3.png');
    background-repeat:repeat-x;
    background-position:top;
    height: 400px;
    background-color: #050505;
    position: fixed;
    z-index: 1;
}

<div class='pageband nav-band'>
<ul class='horizontal-list'>
<li class='nav-item active'>
<a href="http://...">Home</a>
</li>
...
</ul>
</div>
<div class='pageband header-band'>&nbsp;</div>
<div class='pageband core-band'>
<div class='pageband logo-band '>
<div class='container_12'>
...

Answer 1

尝试使用此代码：

@media screen and (orientation: landscape){
   .nav-band {
      // rest of code
   }
}

@media screen and (orientation: portrait){
   .nav-band {
      // rest of code
   }
}

这将针对您的设备方向和＆＃34;重置＆＃34;你的代码。

Answer 2

您设置position: fixed但不实际定位元素。将top: 0px和left: 0px添加到导航栏css，以确保它位于屏幕顶部。

.nav-band{
    width: 100%;
    font-weight: bold;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 3;
    overflow: hidden;
    background-image:url('../img/trans_black.png');
    padding: 2px;
}

Answer 3

感谢您对这个令人沮丧的问题的帮助。

position: fixed;最初在我的Android和桌面设备上失败了。删除 position: relative;从fixed元素容器修复了桌面上的问题而不是android（Galaxy Note 5）添加该元素的-webkit-backface-visibility: hidden;也不适用于android，但确实引起了一些有趣的闪烁和位置变化...... 将display: block;添加到元素的容器中，修复了android上的定位，它仍可在桌面上运行。

好东西看起来像这样 css：

body {
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-repeat: repeat-y;
  display: block;
  height: 200vh;
  overflow-y: scroll;  
  width: 100vh;  
} 

#fixed-red-box {
  position: fixed; 
  top: 6%; 
  right: 4%; 
  -webkit-backface-visibility: hidden; 
  height: 5vh; 
  width: 10vw; 
  border: 1vw solid red; 
  z-index: 300;
  }  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-
       scale=1"/>version=5.1"/>
  </head>
  <body>
    <div id="fixed-red-box"></div>
  </body>
</html>

花了一个月才发现这个问题。不是编码器，但做一些编码希望这可以帮助其他人解决这个问题。

position：fixed对android无效

3 个答案: