uni-app锁屏控制中心适配不同尺寸手机屏幕

uni-app无法直接控制原生锁屏界面，所谓“锁屏控制中心适配”实为在应用内模拟控制面板，并需结合uni.getSystemInfo获取safeArea动态计算高度、用env/constant安全区CSS属性贴底、按屏幕宽度分条件切换布局以适配不同设备。

uni-app 本身不提供“锁屏控制中心”这种系统级功能，也没有 API 能直接接管或定制 iOS/Android 的原生锁屏界面。所谓“锁屏控制中心适配”，实际是指：在应用内模拟控制中心样式（如上拉面板、快捷开关、媒体控制等），并确保它在不同尺寸手机上显示合理、可操作、不被安全区域遮挡。

为什么直接用 rpx 会把控制面板盖在状态栏或虚拟键下面

rpx 只按 windowWidth 等比缩放，但控制面板这类浮层组件必须考虑垂直方向的真实可用空间和系统边界：

1. statusBarHeight 在 iPhone X 及以上机型可能达 44px，刘海屏下顶部内容若没留空，会被裁掉
2. safeArea.bottom 在安卓全面屏或 iOS 底部横条设备上常为 34–68px，按钮贴底时容易被遮住
3. 某些安卓机 pixelRatio 高达 3.5，rpx 换算后若未配合 image 的 srcset 或 font-smoothing，图标文字会发虚

如何用 uni.getSystemInfo 获取真实安全区域并动态计算面板高度

不能只在 onLoad 里取一次，需结合 onResize（H5）或监听屏幕旋转（小程序暂不支持，需手动触发）：

1. 关键字段必须缓存到响应式数据中：res.windowHeight（可用高度）、res.safeArea.top、res.safeArea.bottom
2. 控制面板最大高度建议设为：res.windowHeight - res.safeArea.top - res.safeArea.bottom - 20（留 20px 交互余量）
3. 示例：在页面 data 中定义 panelMaxHeight: 0，然后在 getSystemInfo success 回调里赋值

uni.getSystemInfo({success: (res) => {this.panelMaxHeight = res.windowHeight - res.safeArea.top - res.safeArea.bottom - 20;}});

控制面板容器必须用 flex + safe-area-inset-bottom 才能真正贴底不遮挡

仅靠 JS 计算高度还不够，CSS 层面要双重保障：

1. 给控制面板外层加 class：control-panel
2. CSS 中必须同时使用：padding-bottom: env(safe-area-inset-bottom)（iOS）和 padding-bottom: constant(safe-area-inset-bottom)（旧版 iOS）
3. 内部内容用 flex: 1 填充，避免固定 height 导致滚动异常

.control-panel {padding-bottom: env(safe-area-inset-bottom);padding-bottom: constant(safe-area-inset-bottom);display: flex;flex-direction: column;height: 100%;}.control-panel-content {flex: 1;overflow-y: auto;}

小屏（如 iPhone 5/SE）和大屏（iPad Pro）的交互逻辑必须拆开

同一套 UI 在 320px 宽屏上挤成一团，在 1024px 上又太空——不能只调尺寸，得换布局模式：

1. 用 res.windowWidth <= 375 判定小屏，隐藏部分次要开关，改用 icon+文字纵向排列
2. 用 res.windowWidth > 768 判定平板，启用分栏式媒体控制（左音频右视频），或增加「快捷场景」区域
3. 避免用 @media (min-width: 768px)，小程序不支持媒体查询；全部逻辑收口到 JS 判断 + class 切换

真正难的不是算像素，而是判断哪些元素该隐藏、哪些交互该降级、哪些安全区偏移必须硬编码补偿——这些没法靠一个单位自动解决，得逐设备实测验证。