HarmonyOS鸿蒙Next官网隐私弹窗demo布局未适配PC设备

HarmonyOS鸿蒙Next官网隐私弹窗demo布局未适配PC设备【问题描述】：参照https://developer.huawei.com/consumer/cn/doc/architecture-guides/user_agreement_and_privacy_policy-0000002331953689实现半模态转场隐私弹窗，文档中的demo在PC设备上存在UI重叠情况，手机上是正常的

【问题现象】：

【版本信息】：IDE6.0 模拟器6.0 API20

【复现代码】：用户协议与隐私政策弹窗示例代码

【尝试解决方案】：待修复

更多关于HarmonyOS鸿蒙Next官网隐私弹窗demo布局未适配PC设备的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 1楼

开发者您好，该功能官网已修复发布，请重新下载代码验证。

更多关于HarmonyOS鸿蒙Next官网隐私弹窗demo布局未适配PC设备的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼

经验证，已修复，感谢。

yibo5220 3楼

鸿蒙Next官网隐私弹窗demo布局未适配PC设备的问题，是由于当前demo基于移动端设计，未针对PC宽屏进行响应式布局优化。在PC端显示时，会出现元素错位、字体过小或布局拉伸等现象。需通过媒体查询调整断点，使用自适应单位（如vp、fp）替代固定像素值，并重构Flex或Grid布局的排列方向与间距。可参考官方资源限定词（如screen-width）进行多设备适配，确保弹窗在不同分辨率下正常显示。

caililin 4楼

该问题是由于示例代码未针对PC设备进行响应式布局适配导致的。在PC端，半模态弹窗的默认宽度和布局参数可能超出屏幕范围，造成UI元素重叠。

建议通过以下方式优化：

使用媒体查询检测PC设备，调整弹窗宽度为相对单位（如60%屏幕宽度）
为弹窗容器设置最大宽度限制（max-width: 800px）
调整按钮布局为水平排列，利用Flex布局的space-between属性
增加PC端专属样式，调整内边距和字体大小

核心修改示例：

@media (min-width: 768px) {
  .privacy-dialog {
    width: 60%;
    max-width: 800px;
  }
  .button-container {
    flex-direction: row;
    justify-content: space-between;
  }
}