解决移动端不支持position: fix

最近我在做自己公司的官网，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的深入理解