科技公司网站建设,wordpress上传gif,上海电商摄影,中职示范校建设专题网站IOS 浏览器页面布局错位(如#xff1a;点不到)的分析与解决IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏#xff0c;很容易导致页面布局错位(相对窗体的绝对定位元素)#xff1a;明明按钮在这里#xff0c;却要在上面一点儿点击屏幕才能点到它明明…IOS 浏览器页面布局错位(如点不到)的分析与解决IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏很容易导致页面布局错位(相对窗体的绝对定位元素)明明按钮在这里却要在上面一点儿点击屏幕才能点到它明明弹框是居中显示的却向上偏移了很多导致下面很多空白明明是固定浮动在某个位置却点不到它1. Android 与 IOS 的差异在 Android 中软键盘的弹起与收缩会触发 window 对象的 resize 事件而 IOS 不会微信 IOS 浏览器底部导航条的显示与隐藏会触发 window 对象的 resize 事件而 Android 中没有底部导航条2. IOS 里的一些特性为了达到极致的体验IOS 浏览器很多特性是不遵循 W3C 规范的软键盘的弹起与收缩不会触发 window 对象的 resize 事件软键盘收缩后固定定位的元素处于错位状态需要滑动页面后才能刷新页面恢复到正常状态3. 具体情况分析不管是 IOS 浏览器软键盘的拉起与收缩还是微信 IOS 浏览器底部导航条的显示与隐藏都是改变的 window 窗体的大小。微信 IOS 浏览器底部导航条的显示与隐藏跟软键盘的拉起与收缩是差不多的但微信 IOS 浏览器底部导航条还有一个很大的特点在单页面应用(SPA)中当路由发生变化时底部导航条会一下子就显示而这很难确定是先渲染了页面还是先显示了底部导航条这也很容易导致元素布局错位。4. 怎么解决4.1 监听键盘弹起与收缩自动做一些操作新建 watch-keyboard.js 脚本引入到页面中。当页面中键盘弹起时body 会有 keyboard-active class可以根据这个隐藏一些元素。import {isIos} from ../utils;import debounce from lodash/debounce;// 初始高度const winHeight window.innerHeight;// 判断是不是弹起了软键盘const judgeDistance 200;if (!isIos) {window.addEventListener(resize,debounce(() {if (window.innerHeight winHeight - judgeDistance) {// 键盘弹起document.body.classList.add(keyboard-active);} else {document.body.classList.remove(keyboard-active);}}, 300),!1);}else {// IOS 软键盘的弹起与收缩不会触发 window 对象的 resize 事件用定时器实现// 保证能够滚动document.body.style.minHeight (winHeight 2) px;// 上两次高度记录let secondLastWinHeight winHeight;// 上一次高度记录let lastWinHeight winHeight;setInterval(() {const newWinHeight window.innerHeight;// 变化结束if (secondLastWinHeight ! lastWinHeight lastWinHeight newWinHeight) {if (newWinHeight winHeight - judgeDistance) {// 键盘弹起document.body.classList.add(keyboard-active);} else {document.body.classList.remove(keyboard-active);// window 需要滚动一下让页面刷新一下否则弹框会出现错位的问题window.scrollTo(0, window.scrollY ? window.scrollY - 1 : 1);}}secondLastWinHeight lastWinHeight;lastWinHeight newWinHeight;}, 300); // 可以根据需要调整间隔时间(越小越精确)}4.2 监听窗体大小变化执行一个回调做更多操作当软键盘弹起时又点击了一个按钮然后显示弹框(如从底部向上弹出)的时候这个时候就需要等待软键盘收起之后IOS 刷新屏幕之后再显示弹框。新建 wait-for-stable-win-height.js 脚本引入到页面中。import { isIos } from ../utils;/*** 等待 window 高度不变了之后执行一个回调函数** param onComplete 完成的回调* param delay 延迟多少时间再判断* param interval 定时器间隔时间*/export default ({ onComplete, delay 200, interval 50 }) {setTimeout(() {let winHeight window.innerHeight;const timer setInterval(() {const newWinHeight window.innerHeight;if (winHeight newWinHeight) {clearInterval(timer);if (onComplete) {if (!isIos) {setTimeout(() {onComplete();}, 100);return;}// window 需要滚动一下让页面刷新一下否则弹框会出现错位的问题window.scrollTo(0, window.scrollY ? window.scrollY - 1 : 1);setTimeout(() {onComplete();}, 200);}} else {winHeight newWinHeight;}}, interval);}, delay);};后续版权声明自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证)
