安卓软键盘弹出导致window.resize引发的血坑

最新推荐文章于 2024-01-22 15:26:55 发布

原创最新推荐文章于 2024-01-22 15:26:55 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nuxt #安卓兼容性 #vue

vue 同时被 2 个专栏收录

58 篇文章

订阅专栏

nuxt

5 篇文章

订阅专栏

在模拟不同手机机型时，为解决样式同步问题，使用了window.resize事件监听并强制刷新页面，但在安卓设备上，键盘弹起会触发此事件，导致表单提交页面在输入后自动刷新，因URL缺少尾部斜杠引发页面崩溃。此外，发现setInterval在安卓上失效，需使用window.setInterval确保兼容性。这两个问题在iOS设备上未出现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事故起因：

因为在模拟器上切换不同手机机型时，样式不能立即同步，必须重新刷新一下。所以最开始打算在每次window.resize的时候强制刷新。也就是

resizewin.js

-------------------------------------------------------------

window.addEventListener("resize", function () {

window.location.reload()

})

----------------------------------------------------------------

nuxt.config.js

plugins: [

{

src: '@/plugins/fontsize.client.js',

ssr:false

{

src: '@/plugins/vconsole.js',

ssr:false

}

pc上虽然满足了每次需求，但是却买了一个大地雷。

在表单提交页面，每次在input框输入内容以后，会发生一个极大的bug，就是过一会以后页面自动崩溃，提示找不到页面。最开始一直在blur事件里找原因，没找到问题。后来意外发现。在安卓手机上每次键盘谈起都会触发resize事件。进而导致刷新。

因为后端配置的入口页面地址形如:http://xxxx.koa.com/style/,而表单提交的页面当前地址是

http://xxxx.koa.com/style/form，刷新的时候http://xxxx.koa.com/style/form这个地址没法访问。也就是说你直接通过http://xxxx.koa.com/style/form去访问时没法访问的，必须是http://xxxx.koa.com/style/form/才行。导致刷新的时候去访问了http://xxxx.koa.com/style/form这个地址，最后挂了。这也是后端买了一个坑。

最后试着去掉了

window.addEventListener("resize", function () {

window.location.reload()

})这个代码。就正常了。

ps：项目里还有一个巨坑：一个定时器60秒倒计时，setInterval在安卓上无效，但是在ios上正常。最后加上window.setInterval就正常了、