uni-app 一键登录功能在红米Note9手机中勾选服务协议的框框被挡住

uni-app 一键登录功能在红米Note9手机中勾选服务协议的框框被挡住

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX

示例代码：

一健登录功能

操作步骤：

一健登录功能

预期结果：

一健登录功能

实际结果：

一健登录功能

bug描述：

一健登录功能红米Note9手机里面勾选服务协议的框框挡住了

image


更多关于uni-app 一键登录功能在红米Note9手机中勾选服务协议的框框被挡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 一键登录功能在红米Note9手机中勾选服务协议的框框被挡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在红米Note9这类全面屏手机上，登录协议勾选框被遮挡通常是由于安全区域适配问题导致的。这属于常见的底部安全区域适配问题。

解决方案：

  1. 使用安全区域CSS变量
.protocol-box {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
  1. 调整布局容器 确保协议勾选区域在安全区域内：
<view class="login-container">
  <!-- 其他登录内容 -->
  <view class="protocol-section safe-area">
    <checkbox /> 同意服务协议
  </view>
</view>
  1. 使用uni-app安全区域组件
<view class="safe-area-inset-bottom"></view>
回到顶部