css中手机端浏览器 fixed 定位问题解决办法

时间：2022-06-25 11:18:23 编辑：袖梨来源：一聚教程网

首先说下开发模式，刚刚开始接触，基本沿用web端开发方式，目前开发模式上没有找到的适合的，现在基本这样：
1，电脑nginx配置服务器
3，电脑和手机连同一个局域网，
2，android root 和 iphone越狱来绑hosts，访问电脑配置的环境。
但是 UC,QQ浏览器缓存严重，根本对hosts的文件的修改无动于衷。。不得每次修改将文件更到外网修改，调试起来相当麻烦。

一个问题是有些根本不支持fix定位，这个只有绑定js touchmove事件兼容了。
最令人头疼的是不完全支持。。
首先遇到的问题是在fix定位的元素内不能有 position:relative 或者 absolute的元素，如果有，这些元素不会受到fixed的祖先元素的限制，会根据body定位，滚动到最底部的时候才跟着fixed元素一起滚动。这个的解决就是去掉那些定位，换用其他定位方式。。
另一个问题fix定位后，fix的浮层根本不显示，只有滚动到最底部才显示出来，然后可以正常fixed定位。这个层是js动态添加，我曾经试过在js里 el.style.display = ‘none’;el.style.display = ‘block’; 但是没有任何作用，最终解决方法是在css里设置display:none; 然后动态插入body后设置 style.display = ‘block’;这个问题解决。
在解决这个问题后，还有一个问题是这个fix的层在没有滚动的时候可以正常点击，但滚动后点击这个层根本没有反应，这个层会被透过就像设置了 : pointer-eventes:none; 一样，点击到了层的下一层。这个的解决是
将在viewport添加 user-scalable=no：

代码如下	复制代码

变成：

代码如下	复制代码

恩，fix定位基本这些。。

推荐专题

最新下载

热门教程

css中手机端浏览器 fixed 定位问题解决办法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程