来源:未知 时间:2015-08-24 12:08 作者:xxadmin 阅读:次
[导读] 在做移动端项目时,碰到一个很纠结的问题,头部固定的问题,一开始使用fixed,发现一系列的问题, 问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部。 测试环境...
在做移动端项目时,碰到一个很纠结的问题,头部固定的问题,一开始使用fixed,发现一系列的问题, 问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部。测试环境:iPhone 4s&5 / iOS 6&7 / Safari 问题2:页面底部,footer输入框失去焦点时,header定位出错。当页面有滚动动作时,header定位恢复正常。测试环境:iPhone 4s&5 / iOS 6&7 / Safari 操作步骤:1、页面滚动到底部;2、选中底部输入框,使输入框进入focus状态;3、点击页面其他区域,使输入框失去焦点; 问题3:当页面发生跳转,再退回时,fixed区域消失,当内容获得焦点时,fixed区域才显示。测试环境:iPhone 4 / iOS 5 / Safari(其他版本未发现此问题) 问题4:部分浏览器不支持 fixed。测试环境:魅族MX2 / 自带浏览器(MX2上QQ、UC浏览器支持fixed,魅族的系统近期有过升级,更新之后自带浏览器就可以支持fixed) 解决办法:使用 userAgent 检测,如果是魅族MX2自带浏览器则禁用 position:fixed,使用 position:relative 代替。 问题5: 在滚屏过程中,fixed定位异常,touchend之后恢复正常。测试环境:三星i9100(S2) / 自带浏览器(QQ、UC浏览器正常) 问题6: 部分低版本Android对支持不好,video poster属性设置的封面图会遮挡fixed元素。测试环境:摩托罗拉ME525+ / Android 2.3.4 / 自带浏览器、QQ、UC浏览器 问题7: WP8下,QQ、UC浏览器滚动页面时footer定位错误,会往上偏移,是由于地址栏收起的缘故。测试环境:Nokia Lumia920 / WP8 / UC、QQ(自带浏览器正常)
发现iphone4/4s上面有问题,有输入框的页面,发现问题挺大的,后来针对特殊浏览器进行检测: function isSupportFixed() { var userAgent = window.navigator.userAgent, ios = userAgent.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/), ios5below = ios && ios[2] && (parseInt(ios[2].replace(/_/g, ‘.‘), 10) < 5), operaMini = /Opera Mini/i.test(userAgent), body = document.body, div, isFixed; div = document.createElement(‘div‘); div.style.cssText = ‘display:none;position:fixed;z-index:100;‘; body.appendChild(div); isFixed = window.getComputedStyle(div).position != ‘fixed‘;//不支持fixed的会设置成absolute body.removeChild(div); div = null; return !!(isFixed || ios5below || operaMini); } 在测试的时候发现某些android浏览器(华为),在表单获取焦点时,会出现崩溃现象
总结
还是保留之前的态度,依然不推荐在 Android下使用 iScroll。在开发项目时,可以考虑分为两个版本:iOS下使用 iScroll的解决方案,Android下使用 position:fixed。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com