解决移动端不支持position: fix

来源:互联网 发布:log4j2 java api 编辑:程序博客网 时间:2024/05/18 20:07

最近我在做自己公司的官网,pc端做出来了,网页浏览顺畅,但到了手机端测试,问题出现了:网页上的悬浮菜单滑动的时候,不会跟着滚动条走,并且网页出现了横向滚动条。

在这个问题上我折腾了整整一下午的时间,但还是没有解决问题。最终是在第二天早上花了半小时搞定的。

从这个问题上我得到了一种解决问题的思路
1. 当解决一个问题花了较长的时间时,不妨休息下,放在第二天早上去解决,你会收获不一样的感觉。
2. 解决问题要逐渐地缩小问题的范围,直到找到问题的缘由,最终用合理的办法解决。

最后我将问题锁定在position: fix,只添加这一个样式,出现的现象还是同之前一样。这个时候我就联想的是不是position: fix样式手机浏览器不支持。所以就在网上百度了一下,果然问题就出在这里。

再来谈谈这个问题的技术问题:
一般来说大家写上个浮动都是使用css中的position: fixed; 进行控制,但是这种方法只适用于电脑端的,而在手机端却不行,效果就是使用手机浏览器打开网页时显示是底部,但是当我们向下滚动时,而这个浮动的却不跟着一起,这时大家需要在head间添加以下代码即可解决手机浏览器不支持position: fixed的bug了。
需要在head中添加这样一行代码

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

参考自 手机浏览器不支持position: fix
建议学习 移动前端开发之viewport的深入理解