uniapp输入法横屏

处理UniApp输入法横屏问题的方法

调整页面布局适应横屏 在pages.json中配置页面横屏支持，确保输入框和键盘布局适配横屏模式。示例配置如下：

{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "横屏示例",
      "pageOrientation": "auto" // 允许自动旋转
    }
  }]
}

监听屏幕旋转事件 通过onResize事件动态调整UI布局，避免输入框被键盘遮挡：

onLoad() {
  uni.onWindowResize((res) => {
    if (res.size.windowWidth > res.size.windowHeight) {
      this.isLandscape = true
    } else {
      this.isLandscape = false
    }
  })
}

CSS适配方案 使用媒体查询或动态class处理横竖屏样式差异：

.input-box {
  padding-bottom: 100rpx;
}
.landscape .input-box {
  padding-bottom: 200rpx;
}

键盘高度获取 通过uni.onKeyboardHeightChange获取键盘高度并动态调整布局：

uni.onKeyboardHeightChange(res => {
  this.keyboardHeight = res.height
})

原生配置补充（App端） 在AndroidManifest.xml中配置Activity支持横屏：

<activity
  android:name="io.dcloud.PandoraEntry"
  android:screenOrientation="sensorLandscape"
  android:configChanges="orientation|keyboardHidden|screenSize"
/>

注意事项

• iOS需确保Xcode项目勾选所有方向支持
• 部分Android机型可能需要单独处理键盘弹出模式
• 测试时需覆盖不同分辨率和系统版本

以上方案组合使用可有效解决UniApp横屏场景下的输入法适配问题，实际开发中建议通过真机多场景测试验证效果。