您的位置:首页 > Web前端 > css

移动端web页面使用position:fixed

更多 2015/7/8 来源:css学习浏览量:2999
学习标签: css
本文导读:移动端web页面中,在给文本框输入内容的时候,小键盘激活,本来设置固定在顶部和底部的图层会发生位置偏移​。主要原因就是position fixed 还不能很好的兼容移动端安卓,ios。下面介绍在移动端web页面中使用position:fixed的方法

 

在做移动端项目时,遇到页面头部固定的问题,一开始使用fixed,发现会出现一系列的问题。

 

例如

 
 
HTML 代码   复制

<style>

.wap_bottom { 
height: 60px; 
width: 100%; 
position: fixed; 
z-index: 2; 
bottom: 0; 
left: 0; 
opacity: 0.7; 
} 

</style>

<div class="wap_bottom"> <a href="http://www.studyofnet.com" target="_blank"></a></div> 

效果就是使用手机浏览器打开网页时显示是底部,但是当我们向下滚动时,而这个浮动的却不跟着一起.

 

解决方法

 

在head间添加以下代码即可解决手机浏览器不支持position: fixed的问题。

 

 
   复制


<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

 

收藏
89
很赞
489