> 技术文档 > uniapp [移动端H5网页] - 强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页也适用）_uniapp 打包h5,input 输入内容的时候,页面元素会被弹起的键盘往上顶

uniapp [移动端H5网页] - 强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页也适用）_uniapp 打包h5,input 输入内容的时候,页面元素会被弹起的键盘往上顶

技术文档

前言

网上的教程太乱且大部分无效，本文提供优质教程。

在 uni-app 移动端H5平台端或微信公众号网页开发中，解决软键盘弹起页面被挤压、被往顶的问题，点击Input输入框弹出键盘后网页被上推导致底部内容上移，或者整体页面因为软键盘的弹出导致上推后整体页面变形、元素错位、遮挡等各种问题，提供详细解决方案和示例代码。

uniapp v2 / v3 版本均可使用，跟着方案思路复制代码。

如下图所示，无论是安卓还是苹果手机完美兼容解决。

详细代码，保证搞定

uniapp [移动端H5网页] - 强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页也适用）_uniapp 打包h5,input 输入内容的时候,页面元素会被弹起的键盘往上顶

解决方案

具体多种实现思路及代码如下，请直接复制运行测试即可。