微信端vue项目软键盘弹起之后页面被压缩的问题？-灵析社区

其实被压缩的是窗口高度，页面的文档流会通过滚动条机制来应对所有高度的，文档流就不存在被压缩的问题。 所以你的“被压缩”，如果不是因为你按屏幕高度比写布局的话，那就只有一种可能——不是页面被“压缩”，而是你页面底下的按钮因为“水涨船高”而跑上来了。 “水涨船高”的按钮，通常是通过 `position:fixed`或者`position:sticky` “粘”在视口底部的，这样的设计在**全尺寸显示** 的情况下不会有问题，只是**软键盘一顶上来** 就违背初衷了。 那么，如果确实如此的话，解决的方案也就清晰明了了：分**全尺寸** 和**软键盘** 两种情形来布局就行了，全尺寸的时候该显示还得显示，顶上来的时候底下的内容就不显示，例如使用 JS ： { mounted(){ window.addEventListener('resize', () => { // 触发阈值可以根据窗口的全尺寸高度再加上某个经验值来确定 if(window.innerHeight < xxxxx){ // 假设 buttonWrap 是页面中那些被顶上来的内容的容器 this.$refs.buttonWrap.style.display = "none"; } else { this.$refs.buttonWrap.style.display = "block"; // "flex"... } }) } } 当然如果我猜错原因的话就另请高明吧。