IOS浏览器页面布局错位（eg：不可点击）分析及解决

IOS浏览器页面布局错位（eg：可点击）分析及解决IOS浏览器软键盘的上拉和收缩，微信IOS导航的显示和隐藏浏览器底部的bar很容易导致页面布局错位（相对于表单的绝对定位元素）：按钮在这里，但你必须点击屏幕才能点击它。明明是弹框显示在居中，但是向上偏移了很多，导致下面出现了很多空白，这些空白明显是固定的，浮动在某个位置，但是不能点击1.安卓和IOS的区别在Android，软键盘的弹出和收缩会触发window对象的resize事件，而IOS没有微信。IOS浏览器底部导航栏的显示和隐藏会触发window对象的resize事件，而Android中没有底部导航栏。2、IOS中的一些特性为了达到极致的体验，IOS浏览器的很多特性不遵循W3C规范的软键盘的弹出和收缩都不会触发window对象的resize事件。软键盘收缩后，固定定位的元素处于错位状态，滑动页面后需要刷新页面才能恢复正常状态。3、具体情况分析无论是IOS浏览器软键盘的上拉和收缩，还是微信IOS浏览器底部导航栏的显示和隐藏，变化的都是窗口的大小。微信IOS浏览器底部导航栏的显示和隐藏类似于软键盘的上拉和收缩，但是微信IOS浏览器底部导航栏还有一个很大的特点：在单个-页面应用（SPA），当路由发生变化时，会立刻显示底部导航栏，很难判断是先渲染页面还是先显示底部导航栏，容易造成element布局错位。4、如何解决4.1监听键盘的弹起和收缩，自动做一些操作新建一个watch-keyboard.js脚本，导入到页面中。页面弹出键盘时，body会有一个keyboard-active类，基于此可以隐藏一些元素。import{isIos}from'../utils';importdebouncefrom'lodash/debounce';//初始高度constwinHeight=window.innerHeight;//判断软键盘是否弹起constjudgeDistance=200;if(!isIos){window.addEventListener('resize',debounce(()=>{if(window.innerHeight{constnewWinHeight=window.innerHeight;//改变结束if(secondLastWinHeight!==lastWinHeight&&lastWinHeight===newWinHeight){if(newWinHeight{setTimeout(()=>{letwinHeight=window.innerHeight;consttimer=setInterval(()=>{constnewWinHeight=window.innerHeight;if(winHeight===newWinHeight){clearInterval(timer);if(onComplete){if(!isIos){setTimeout(()=>{onComplete();},100);返回;}//window需要滚动让页面刷新，否则弹框会出现错位window.scrollTo(0,window.scrollY?window.scrollY-1:1);setTimeout(()=>{onComplete();},200);}}else{winHeight=newWinHeight;}},间隔);},延迟);};关注更多博文，查看https://github.com/senntyou/blogs作者：沉育智(@senntyou)版权免责声明：免费转载-非商业-非衍生-保持署名（创意共享）3.0许可证）