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

我正在制作一个适用于移动设备的Web应用程序。我的电脑浏览器上有一个位于屏幕右侧的工具栏，它应该固定在手机屏幕的底部。奇怪的是，使用iPhone打开工具栏时，工具栏显示为正确固定在底部，但是当我在Android设备（如Samsung Galaxy S5）上打开该应用程序时，工具栏并未出现。进行一些测试时，当我将样式更改为相对而非固定时，工具栏将显示在iPhone和Android屏幕中间的相同位置。你认为这个问题可能是什么？Div底部工具栏出现在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; 
}

这造型是较小尺寸的屏幕媒体查询内，如上所述，是一个品牌的移动设备上的适应，所以我知道没有一个媒体查询问题。

来源

2017-03-07 Kevin

add top：auto;我认为这有助于你 –

这没有奏效：/ – Kevin

你可以发布完整的代码，桌面和移动css？ – demonofthemist

如果加{左：0}无法解决它，我猜可能是.sidebar-nav-right的父节点有变换;那么位置原点已被重置。

来源

2017-03-07 06:17:24

添加左边：0;工作。你guyz统治！ – Kevin

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

有两种方法可以解决这个问题。请参阅本文由布拉德·弗罗斯特Javascript的解决方案的列表：http://bradfrost.com/blog/mobile/fixed-position/

或者尝试通过本文思上述修正：https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

由Ben文思看到这个CodePen还有：http://codepen.io/benfrain/full/wckpb

来源

2017-03-07 06:02:45

我正在运行Android 6.0.1。添加webkit不起作用。 – Kevin

我认为@ GoreWang的评论是现货。你应该试试以下两两件事：

（1）随着固定位置，有时不是一个左属性集导致固定元素加载页面时不会出现。尝试添加以下内容：

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

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

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

这迫使Chrome浏览器使用硬件加速，不断作画固定元件和避免这种怪异行为（已知的bug）

来源

2017-03-07 06:31:11

好点！ :) – Kevin

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

回答

相关问题