移动端网页fixed布局问题解决方案
问题说明
移动端web的footer常常设计为fixed布局，但是在页面键盘被拉起时fixed的布局会出现问题，自己试了下，在较低版本ios和部分安卓机上会有此问题。具体问题看图示：
<body class="layout-fixed">
<!-- 可以滚动的区域 -->
<main>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</main>
<!-- fixed定位的底部 -->
<footer>
</footer>
</body>
样式：
header, footer, main {
display: block;
}
footer {
position: fixed;
height: 34px;
left:;
right:;
bottom:;
}
main {
margin-bottom: 34px;
height: 2000px;
}
蓝色的footer是fixed定位，没有唤起软键盘的时候一切正常。
唤起软键盘，在低版本ios里面就变成：（此问题在iphone4[ios7.1.2]出现，iphone6[ios9.3.1]已经修复）
这个是滑动了一部分页面的效果，footer不听话了，没有留在最底部，跑中间了。
在某些安卓里面（如锤子SM705，安卓4.4.2）看这样：
footer紧贴软键盘，遮挡后面的区域。
产生原因：
键盘被拉起之后，fixed定位失效了，会跟随页面滚动，类似absolute了。布局乱了。
解决方法：
1.使用iscroll.js解决，库已经修复了这些问题
2.问题是由于滚动区域可以滚动引起的，那么就指定main为可滚动区域，就不会影响到footer了：
改动：
<body class="layout-fixed">
<!-- 可以滚动的区域 -->
<main>
<div class="content">
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</div>
</main>
<!-- fixed定位的底部 -->
<footer>
</footer>
</body>
footer {
position: fixed;
height: 34px;
left:;
right:;
bottom:;
}
main {
/* main绝对定位，进行内部滚动 */
position: absolute;
bottom: 34px;
overflow-x:auto;
overflow-y: scroll;
}
main .content {
height: 2000px;
}
这样改了之后又有一个问题，就是滑动在手指离开触屏之后会停，如果想恢复之前的特性，还需要做些处理：
main {
/* main绝对定位，进行内部滚动 */
position: absolute;
bottom: 34px;
overflow-y: scroll;
/* 增加该属性 */
-webkit-overflow-scrolling: touch;
}
但在 Android2.3+ 中，因为不支持 overflow-scrolling ，因此部分浏览器内滚动会有不流畅的卡顿。
3.其实还有更直接的解决方案，就是，在focus时给另外一个视图(就是把footer隐藏掉)不显示footer,在失去焦点时再显示回来。这个虽然说简单粗暴，但最有效方便。
4.另外的解决方案就是用js动态控制footer的样式，和3的思路类似。需要加一段js,让原来的元素变成absolute,失去焦点的时候再改回去：
.fixfixed {
position:absolute;
}
$(document)
.on('focus', 'input', function(e) {
$this.addClass('fixfixed');
})
.on('blur', 'input', function(e) {
$this.removeClass('fixfixed');
});
也可以改成static。
5.思路类似的方法
$(document)
.on('focus','input',function(e){
$('#viewport').height($(window).height()+'px');
})
.on('blur','input',function(e){
$('#viewport').height('auto');
});
还有其他的一些移动端拉起键盘相关的问题，及解决方案：
- 有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。
- 在 iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。
- 有些第三方浏览器底部的工具栏是浮在页面之上的，因此底部 fixed 定位会被工具栏遮挡。解决办法也比较简单粗暴——适配不同的浏览器，调整 fixed 元素距离底部的距离。
- 最好将 header 和 footer 元素的 touchmove 事件禁止，以防止滚动在上面触发了部分浏览器全屏模式切换，而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。
- 在页面滚动到上下边缘的时候，如果继续拖拽会将整个 View 一起拖拽走，导致页面的“露底”。
参考：http://efe.baidu.com/blog/mobile-fixed-layout/
移动端网页fixed布局问题解决方案的更多相关文章
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- 虚拟键盘冲击移动端fixed布局的解决方案
在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug ...
- Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...
- [转] Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...
- 八、Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...
- 移动端设置fixed布局的问题解决
最近写移动端,遇到一个问题就是用fixed属性布局的时候由于手机的原因会出现很多问题,比如说手机端底部固定一块,然后里面有输入框,(类似于手机QQ或者微信底部的输入框一样的布局)这个时候在调用软键盘的 ...
- 移动端— position: fixed;固定定位解决方案
这里有个关键的东西叫做viewport,你经常在页面的头部里可以见到它: <meta name="viewport" content="width=device-w ...
- 个人收藏的移动端网页布局rem解决方案
写移动端项目时,总是会纠结是用css3 media query 还是用rem.移动端框架挺多,但是因为项目都比较小,不考虑使用. 无意在网上找到一个移动端rem布局的解决方案,经个人实践,目前未出现什 ...
- web移动端input获得光标Fixed定位失效解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...
随机推荐
- Android学习
http://www.jikexueyuan.com/path/android 一.概述: 03年10月建立android科技,05年8月被google收购,07年11月成立开放手持设备联盟(Open ...
- iOS 一个app跳转另一个app并实现通信（如A跳到B并打开B中指定页面）
功能实现:A跳到B并打开B中指定页面 步骤: 1.首先创建两个项目(项目A,项目B),在项目B中的info.plist文件中添加URL Types,如下图所示:其中URL idenifier是项目B的 ...
- mybatis——延迟加载
------------------------------------------------SqlMapConfig.xml------------------------------------ ...
- 如何用java写出无副作用的代码
搞java的同学们可能对无副作用这个概念比较陌生,这是函数式编程中的一个概念,无副作用的意思就是: 一个函数(java里是方法)的多次调用中,只要输入参数的值相同,输出结果的值也必然相同,并且在这个函 ...
- BarTender是怎么做出雪花状文字
一些小伙伴在做标签时,发现有的人做的标签上的文字颜色不是纯色的,问我是怎么做的.这种雪花状文字要设置出来其实很简单,只要用到字体颜色填充工具就可以了.下面,小编就来给大家简单介绍一下BarTender ...
- Java--super关键字用法
看了马老师的视频,百度了一下,随即敲了一些代码,super是超人,超级的意思,层面上理解为父类 class Person { Person(){ System.out.prin ...
- LB负载均衡之Nginx-Proxy
LB负载均衡之Nginx-Proxy Nginx 反向代理及负载均衡引用实战 Nginx反向代理的原理优点: Nginx proxy(反向代理)作为Nginx的重要功能,使用nginx pr ...
- delphi 动态更改屏幕分辨率（转）
一.如何动态更改屏幕分辨率 有许多小工具可以在不重新启动Windows的条件下,动态更改屏幕分辨率.你是不是也想自己动手做一个呢?请在interface段中加入下面一句 function Resolu ...
- 《大型网站系统与Java中间件实践》读书笔记
分布式系统的基础知识 阿姆达尔定律 多线程交互模式 互不通信,没有交集,各自执行各自的任务和逻辑 基于共享容器(如队列)协同的多线程模式->生产者-消费者->队列 通过事件协同的多线程模式 ...
- winform中button点击后再点击其他控件致使button失去焦点，此时button出现黑色边线，去掉黑色边线的方法
winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法 button的FlatAppearence属性下,设置BorderSize= ...