uniapp可视范围高度 - 用户屏幕可操作的屏幕高度 - 适用于APP、H5@公众号、纯H5@Chrome，Uniapp可视范围高度详解，用户屏幕可操作的屏幕高度在APP、H5公众号及纯H5 Chrome中的应用 - 技术分享

温馨提示：这篇文章已超过424天没有更新，请注意相关的内容是否还可用！

摘要：uniapp可视范围高度指的是用户屏幕可操作的屏幕高度，适用于APP、H5公众号和纯H5的Chrome浏览器。在开发过程中，开发者需要注意这一高度限制，以确保应用程序在不同平台和设备上的兼容性和用户体验。通过合理设计和布局，确保内容在屏幕可视范围内，避免因超出用户操作范围而导致的不便。

获取应用窗口的高度信息，可以通过uni.getWindowInfo() 方法获取到窗口高度windowHeight 和窗口顶部位置windowTop，然后将两者相加得到可视范围高度，计算公式如下：

可视范围高度 = windowHeight + windowTop

官方手册

uni.getWindowInfo() 方法用于获取应用窗口信息，你可以在uni-app官网找到详细文档，文档链接如下：

实测数据

以下是在不同平台和设备上进行实测得到的uni.getWindowInfo() 返回的数据。

APP-安卓真机实测

{
    ...
    "windowHeight": 640,  // 窗口高度
    "windowTop": 0,      // 窗口顶部位置
    ...
}

可视范围高度为：640px。

纯H5 - 非公众号

{
    ...
    "windowHeight": 800,  // 窗口高度
    "windowTop": 44,     // 窗口顶部位置（可能被状态栏占用）
    ...
}

可视范围高度为：800px（需考虑状态栏占用高度）。

H5公众号 - 苹果机iPhone13Pro

{
    ...
    "windowHeight": 710,  // 窗口高度（受安全区域影响）
    "windowTop": 44,     // 窗口顶部位置（可能被状态栏占用）
    "safeAreaInsets": {  // 安全区域信息，可能影响布局和显示
        "bottom": 34     // 安全区域底部距离窗口底部的高度，可能影响底部布局和按钮位置
        ...             // 其他安全区域信息，如左右顶部等，具体数值根据设备不同而异。
    },
    ...
}

可视范围高度为：710px（需考虑安全区域底部占用高度），实际开发中需要根据安全区域信息调整布局和组件位置，确保内容在屏幕安全区域内显示，具体数值和设备型号有关，需要根据实际情况调整，其他平台和设备的数据类似，主要差异在安全区域信息上。