欢迎!从2017年开始,将慢慢的不在xmind上写总结了,全部转到博客中!这里将不再随便写写,将继承在xmind的精神,继续前行!!!

服气的 移动端 fixed 定位 焦点问题

移动端 fixed 定位 焦点问题,这个问题从我刚开始接触移动端,就遇到了,那时ios 8版本以下出现,以上就没有了 ,安卓没问题!!

当时看的网上的 方案 采用-----获取焦点的时候 隐藏 底部固定部分!!!以后的项目 尽量避免这种设计稿子~~-----搜索页 单独一个页面进行等方式 进行规避这个问题

 

今天 !!竟然在安卓手机出现了,------那就尝试用最新的 flex布局 解决!!!

将项目改成 flex,将fixed 改成

absolute

依旧存在!!!卧槽 继续百度!!

看到一段文字, absolute 根据html的高度,获取焦点的时候,高度变了!!! 所以

用js 固定住 html 的高度,(好使了)------------

总的来说 :flex布局,不用fixed,固定住 html高度 

const htmlHeight = document.body.clientHeight;
document.getElementsByTagName('html')[0].style.height = htmlHeight + 'px';

 

提示:页面中也不要有fixed的元素了,否则,固定住高度,获取焦点的时候,会错位!!

 

666

posted @ 2018-05-24 16:11  拐进web的奋斗者  阅读(128)  评论(0)    收藏  举报