uniapp安卓设备h5页面键盘弹出，页面样式上跳问题——解决笔记

原创于 2021-04-08 00:35:25 发布

· 1.5k 阅读

0 ·

版权

文章标签：

#css3 #html5

样式专栏收录该内容

3 篇文章

订阅专栏

本文记录了在uniapp中创建的H5页面在安卓设备特别是钉钉环境下，因输入框聚焦导致页面样式上跳的bug。问题出现在根view使用flex布局时。解决方案是将flex布局移至内层view，避免在根view中使用。修改后的代码成功解决了样式问题，提醒开发者注意避免在根view添加特定样式。

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

uniapp安卓设备h5页面键盘弹出，页面样式上跳问题——解决笔记

遇到的问题：
使用uniapp写了一个登录页面，当钉钉通过链接进入h5页面后，安卓设备在聚焦输入框时样式就会出现问题，但是奇怪的是苹果设备在钉钉和微信中都没有发现这个问题，安卓在微信中也没有发现这个问题。
在这里插入图片描述
解决问题：
这个也没有什么解决的逻辑，就是挺郁闷的哈哈哈，就单单安卓设备在钉钉上直接打开链接看到了这个样式问题，最后找到了这个问题原因，二话不说直接贴码对比一下
会出现这个问题的代码：

<template>
  <view class="login-view">
  ...
  </view>
</template>
<style>
.login-view {
	display: flex; // 就是因为在根view中加了flex布局
}
</style>

改正后的代码：

<template>
  <view class="login-view">
  	<view class="login-view-con">
  ...
  	</view>
  </view>
</template>
<style>
.login-view-con {
	display: flex;
}
</style>

建议：
最好不要在根view中加一些样式