小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我正在开发一个微信浏览器的 SPA，现在遇到问题，在键盘弹出过收起动画结束后，网页上的元素会有一瞬间被拉伸或挤压变形，这种情况偶尔才会出现，我有什么办法可以解决吗？
留意第三张图片，网页在键盘收起的一瞬间出现了整体的拉伸，这种现象在网页上元素较多的时候更容易出现。
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
提供下复现demo
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> <title>键盘弹出时会出现伸缩</title> <style> #many-items { background-color: pink; width: 100%; height: 100vh; overflow: auto; } </style> </head> <body> <div id="app"> <label> 点我弹出键盘 <input></input> </label> <div id="many-items"></div> </div> <script> const container = document.querySelector('#many-items'); const listContainer = document.createElement('ul'); Array.from({length:20000}).forEach((_, i)=>{ const listItem = document.createElement('li'); listItem.textContent = String(i); listContainer.appendChild(listItem); }); container.appendChild(listContainer); </script> </body> </html>
我也遇到了相同问题，安卓h5页面，同样出现软键盘收起的元素拉伸情况
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
提供下复现demo
评论区内有录制的复现视频
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> <title>键盘弹出时会出现伸缩</title> <style> #many-items { background-color: pink; width: 100%; height: 100vh; overflow: auto; } </style> </head> <body> <div id="app"> <label> 点我弹出键盘 <input></input> </label> <div id="many-items"></div> </div> <script> const container = document.querySelector('#many-items'); const listContainer = document.createElement('ul'); Array.from({length:20000}).forEach((_, i)=>{ const listItem = document.createElement('li'); listItem.textContent = String(i); listContainer.appendChild(listItem); }); container.appendChild(listContainer); </script> </body> </html>我也遇到了相同问题，安卓h5页面，同样出现软键盘收起的元素拉伸情况