百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> css中手机端浏览器 fixed 定位问题解决办法
分享文章到:

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

发布时间:01/15 来源: 浏览: 关键词:
本文章来给各位同学介绍关于css中手机端浏览器 fixed 定位问题解决办法,希望此方法对各位同学会有所帮助哦。


首先说下开发模式,刚刚开始接触,基本沿用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:

 代码如下

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

变成:

 代码如下

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

恩,fix定位基本这些。。

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有19人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板