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定位基本这些。。

时间: 2024-10-26 18:54:54

css中手机端浏览器 fixed 定位问题解决办法的相关文章

解决css中inline-block元素之间有空白问题解决办法

 代码如下 复制代码 <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8" />         <style type="text/css">             * {                 margin: 0;                 padding: 0;             }           

CSS中position属性之fixed实现div居中_javascript技巧

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

解决方案-java web项目,想实现从手机端浏览器向PC端推送消息。

问题描述 java web项目,想实现从手机端浏览器向PC端推送消息. 要求:实现微信浏览器中向PC端推送消息. 我用DWR在PC端能实现推送消息,但是在手机端浏览器中没有任何效果,不知道是我弄错了还是说DWR本身的原因. 问题:请问哪位大神能够给出一套可行的解决方案? 解决方案 服务器主动向android手机端推送消息---------Linux下实现使用js判断手机端和pc端浏览器内核 解决方案二: 借助服务器中转,你把数据推送到服务器,服务器在送到客户端. 解决方案三: GoEasyWeb

Android 中TextView的使用imageview被压缩问题解决办法

Android 中TextView的使用imageview被压缩问题解决办法 看下运行效果图: 今天解bug的时候遇到一个奇怪的问题:listview的item由一个textview和一个imageview组成,父布局是线性水平排列.我的本意是imageview显示相同的图片,textview显示文本,但是运行程序后发现,当某个textview的文本较多时,imageview会被压缩,刚开始没注意,检查代码了好久. 代码示例如下: <!--文本少的item--> <LinearLayou

Css中常见的浏览器兼容性问题及解决方案

一.网页背景半透明 网页背景半透明  代码如下 复制代码 opacity:0.8; filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";IE6中CSS方法解决PNG图片半透明问题: #DIVname {       width: 300px;       height: 99px;       background: url('images/top.png') no-repeat top;       *backgr

CSS中background-position用法与负值定位

先把自己的一些了解分享给大家. 1.原点位置,即外层块元素的左上角 2.background-position 位置设定是指图片与坐标原点的偏移量 3.原点是不会动的,移动的是图片 X坐标为正则图片左上角向右平移,为负则图片左上角向左平移 4.Y坐标为正则图片左上角向下平移,为负则左上角向上平移 5.百分比的计算是有公式的:X轴( container宽度 – 图片宽度 )*含符号百分比 6.Y轴( container高度 – 图片高度)*含符号百分比 再看CSS background-posit

linux中Firefox浏览器flash 崩溃问题解决办法

这一篇介绍一种 Linux 系统下 flash 崩溃的解决办法. 环境如下: 操作系统:openSUSE 13.2 32 位 浏览器:Firefox 34 版本 状况:凡使用 flash 的页面均出现 Adobe Flash 插件已崩溃. 尝试 Chrome 浏览器,同样存在问题: Shockwave Flash has crashed. 排查步骤如下: 打开 Firefox 附加组件页面,检查 flash 相关插件的安装情况,如下图: 我们能看到两个版本的 flash 插件: Shockwav

ajax中ie浏览器缓存存问题解决办法

:在AJAX请求的链接中添加时间戳或随机数 总结三种方法  代码如下 复制代码 1.xmlhttp.setRequestHeader("Cache-Control","no-cache"); 2.url += "&random="+Math.random(); 3.url += "×tamp="+new Date().getTime(); 分析研究 在javascript发送的URL后加上t=Math.random()

关于手机端浏览器显示兼容

解决方法 <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" /> <meta name="format-detection" content="te