uniapp导航栏和菜单栏高度是多少，如何适配不同手机屏幕？

Question

在UniApp开发中，如何准确获取导航栏和菜单栏高度并适配不同手机屏幕是一个常见问题。不同品牌与型号的手机，其状态栏、导航栏及胶囊菜单位置高度差异较大。例如，iPhone X及以上机型存在“刘海屏”，而安卓机则种类繁多。 解决方法如下： 1. 使用`uni.getSystemInfo`获取设备信息，如`statusBarHeight`（状态栏高度）和`screenHeight`（屏幕高度）。 2. 对于胶囊菜单，可通过`swan.getMenuButtonBoundingClientRect`获取具体位置与尺寸。 3. 动态计算内容区域高度，确保页面布局不被遮挡。 通过以上方式，结合灵活的样式调整，可实现跨平台适配。

Answer 1

UniApp开发中屏幕适配的深度解析

在UniApp开发中，如何准确获取导航栏和菜单栏高度并适配不同手机屏幕是一个常见问题。以下从基础到深入逐步剖析解决方案。

1. 基础知识：设备信息获取

在跨平台开发中，了解设备基本信息是关键。通过`uni.getSystemInfo`可以获取设备的状态栏高度、屏幕宽度与高度等参数。

• `statusBarHeight`: 状态栏高度。
• `screenHeight`: 屏幕总高度。
• `windowHeight`: 可用窗口高度。

代码示例：

uni.getSystemInfo({
    success: function(res) {
        console.log('状态栏高度:', res.statusBarHeight);
        console.log('屏幕高度:', res.screenHeight);
    }
});
    

2. 进阶分析：胶囊菜单位置

对于iPhone X及以上机型或安卓机，其胶囊菜单的位置和尺寸差异较大。使用`swan.getMenuButtonBoundingClientRect`可以精准定位胶囊菜单。

属性	描述
left	胶囊菜单距离左边的距离
top	胶囊菜单距离顶部的距离
width	胶囊菜单宽度
height	胶囊菜单高度

3. 高级应用：动态计算内容区域高度

结合上述方法，我们可以动态计算出页面内容区域的高度，确保布局不会被状态栏或胶囊菜单遮挡。

流程图如下：

graph TD;
            A[获取设备信息] --> B{判断是否有胶囊菜单};
            B --是--> C[获取胶囊菜单位置];
            B --否--> D[默认设置];
            C --> E[计算内容区域高度];
            D --> E;

例如，假设胶囊菜单底部距离为`menuBottom`，则可用高度可表示为：

const contentHeight = res.windowHeight - menuBottom;
    

4. 实际案例：样式调整

根据动态计算的结果，可以灵活调整页面样式。例如，将顶部导航栏固定在状态栏下方，并留出足够的空间给胶囊菜单。

以下是CSS样式的示例：

.navbar {
    position: fixed;
    top: var(--status-bar-height);
    height: 44px; /* 根据需求调整 */
    width: 100%;
    background-color: #fff;
    z-index: 999;
}
    

通过以上方式，结合实际项目需求，可以实现更加优雅的跨平台适配方案。