移动端web页面使用position:fixed
移动端web页面使用position:fixed
在做移动端项目时,遇到页面头部固定的问题,一开始使用fixed,发现会出现一系列的问题。
例如
<style>
.wap_bottom {
height: 60px;
width: 100%;
position: fixed;
z-index: 2;
bottom: 0;
left: 0;
opacity: 0.7;
}
</style>
<li class="wap_bottom"> <a href="http://www.studyofnet.com" target="_blank"></a></li>
效果就是使用手机浏览器打开网页时显示是底部,但是当我们向下滚动时,而这个浮动的却不跟着一起.
解决方法
在head间添加以下代码即可解决手机浏览器不支持position: fixed的问题。
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">