2023年6月28日发(作者：)

移动端IOSH5（VUE）界⾯被键盘顶起，键盘收起后⽆法恢复正常 做⼀个轻应⽤，链接到公众号⾥⾯，却发现了⼀些扎⼼的问题....... ⽤户总是反馈说我们的界⾯不好看，空间也空出来⼀⼤块，浪费还不好看，⼀堆被吐槽，⼼累，关键是我⾃⼰怎么看怎么都是正常的，结果.......他们⽤的是iPhone，唉，是我太穷 产品是这样的，进去的第⼀个界⾯就是登录页，所以⾸先就会去点击输⼊框，然后blabla输⼊⽤户名密码登录，然后进⼊⾸页，就发现下⾯的tab页签空出来⼀⼤块，真的是，唉，...mounted(){ this.$nextTick(() => { rHeight = eight - eRealPx(98); });},... 然⽽，并没有什么作⽤...... 于是打算退出登录重新试⼀下，结果突然发现登录页下⾯怎么那么⼤⼀⽚空⽩，然后我就往下滑了⼀下，就好了，于是我多试了⼏次输⼊框聚焦和失焦，可以确认了，确实是软键...// ios页⾯输⼊框失焦后界⾯需要归位// 获取设备类型const u = ent;const isiOS = !!(/(i[^;]+;( U;)? CPU.+Mac OS X/);// 如果是IOS设备if (isiOS) { let flag = false; let pageBackNormFunc; // 聚焦后，键盘弹起 ntListener('focusin', () => { flag = true; pageBackNormFunc && clearTimeout(pageBackNormFunc) }); // 失焦后，键盘关闭 ntListener('focusout', () => { if (flag) { // 页⾯滚动回原来的位置 pageBackNormFunc = setTimeout(() => { To({ top: 0, left: 0, behavior: 'smooth' })；

}, 200); } flag = false; });}...PS：To 不了解的可以点这⾥哦scrollTo借来同事的⼿机试了试，真的是激动.....⽤了两部iPhone⼿机测试，都ok了nice这个问题就这样可以解决了！另外，在开发中遇到⼀个问题就是，为了做⼀些设备的兼容，会使⽤计算的⽅法来给元素获取⾼度和宽度，然⽽⾸次进⼊某个界⾯的时候，[ref].getBoundingClientRect().top 为 0，所以采⽤如下判断的⽅式给赋值之后就可以了...computeHeight(vm, ref, flag, other) { let htmlFont = mentsByTagName("html")[0].ze; let bottomHeight = flag ? 0 : 98/75*(0, htmlFon},computeRealPx(size){ let htmlFont = mentsByTagName("html")[0].ze; size = size/75*(0, -2); return size;},... other = other ? other/75*(0, -2) : 0; var top = vm.$refs[ref].getBoundingClientRect().top ? vm.$refs[ref].getBoundingClientRect().top : 各位⼤佬关于⾃适应和兼容有什么建议可以留⾔哦，本⼈菜鸟求指教，谢谢.........