Question

我正在制作适合/响应移动设备的网络应用。我的计算机浏览器上有一个位于屏幕右侧的工具栏，它应该固定在移动设备的屏幕底部。奇怪的是，当它使用iPhone打开时，工具栏显示在底部正确固定，但是当我在Android设备上打开应用程序时，例如我的三星Galaxy S5，工具栏根本没有出现。进行一些测试，当我将样式更改为相对而不是固定时，工具栏将显示在iPhone和Android屏幕中间的相同位置。你觉得这个问题怎么样？

以下是代码：

<div class="col-sm-2">
 <div class="sidebar-nav-right">
  <div class="navbar navbar-default navbar-style" role="navigation">
   <div class="nav">';
    <a class="brand font-26 block brand-color">Tools</a>
     <ul class="nav navbar-nav center">
     <li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li>
     <li><a href="javascript:;" class = "font-16">Item 2</a></li>
     <li><a href="javascript:;" class = "font-16">Item 3</a></li>
     </ul>
   </div>
  </div>
 </div>
</div>

.sidebar-nav-right{
width: 100%;
position: fixed;
bottom: 0px;
border-top: 1px solid black;
}

这种样式是针对较小屏幕尺寸的媒体查询，并且如上所述，正在适应一个品牌的移动设备，因此我知道媒体查询没有问题。

Answer 1

如果添加{left：0}无法解决它，我想也许.sidebar-nav-right的父节点有转换;然后位置原点已重置。

Answer 2

这是旧版Android浏览器的常见问题。只需将-webkit-backface-visibility: hidden;添加到固定元素即可。

有两种方法可以解决这个问题。有关Javascript解决方案的列表，请参阅Brad Frost的这篇文章：http://bradfrost.com/blog/mobile/fixed-position/

或尝试Ben Frain的上述修复：https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

请参阅Ben Frain的CodePen：http://codepen.io/benfrain/full/wckpb

Answer 3

我认为@GoreWang的评论很有见。你应该尝试以下两件事：

（1）使用固定位置时，有时没有设置左属性会导致在加载页面时不显示固定元素。尝试添加以下内容：

.sidebar-nav-right { 
  left: 0;
}

（2）将以下代码添加到您的固定元素：

 .sidebar-nav-right { 
   transform: translateZ(0);
   -webkit-transform: translateZ(0); 
}

这迫使Chrome使用硬件加速来连续绘制固定元素并避免这种奇怪的行为。（已知错误）

Div底部工具栏出现在iPhone上，但不出现在Android上

3 个答案: