2

我正在制作一个适应/响应移动设备的网络应用程序。我有一个位于计算机浏览器屏幕右侧的工具栏，它应该固定在移动设备屏幕的底部。奇怪的是，当使用 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;
}

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

4

3 回答 3

3

如果添加 {left: 0} 不能解决，我猜可能 .sidebar-nav-right 的父节点有变换；然后位置原点已被重置。

于 2017-03-07T06:17:24.557 回答
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

于 2017-03-07T06:02:45.540 回答
1

我认为@GoreWang 的评论很到位。您应该尝试以下两件事：

( 1)固定位置，有时没有设置left属性会导致页面加载时固定元素不出现。尝试添加以下内容：

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

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

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

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

于 2017-03-07T06:31:11.080 回答