uniapp可视范围高度 - 用户屏幕可操作的屏幕高度 - 适用于APP、H5@公众号、纯H5@Chrome

可视范围高度

let heightPx = uni.getWindowInfo().windowHeight + uni.getWindowInfo().windowTop

官方手册

uni.getWindowInfo() | uni-app官网uni-app,uniCloud,serverless,uni.getWindowInfo()https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html

实测数据

bash 复制代码
============================
uni.getWindowInfo() >> APP-安卓真机实测
============================
{
    "pixelRatio": 3,
    "screenWidth": 360,
    "screenHeight": 640,
    "windowWidth": 360,
    "windowHeight": 640,
    "statusBarHeight": 24,
    "safeArea": {
        "left": 0,
        "right": 360,
        "top": 24,
        "bottom": 640,
        "width": 360,
        "height": 616
    },
    "safeAreaInsets": {
        "top": 24,
        "right": 0,
        "bottom": 0,
        "left": 0
    },
    "windowTop": 0,
    "windowBottom": 0,
    "screenTop": 0
}

============================
uni.getWindowInfo() >> 纯H5 - 非公众号
============================
{
    "windowTop": 44,
    "windowBottom": 0,
    "windowWidth": 390,
    "windowHeight": 800,
    "pixelRatio": 3.0000001192092896,
    "screenWidth": 390,
    "screenHeight": 844,
    "statusBarHeight": 0,
    "safeArea": {
        "left": 0,
        "right": 390,
        "top": 0,
        "bottom": 844,
        "width": 390,
        "height": 844
    },
    "safeAreaInsets": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
    },
    "screenTop": 44
}


============================
uni.getWindowInfo() >> H5公众号 - 苹果机iPhone13Pro
============================
{
    "windowTop": 44,
    "windowBottom": 0,
    "windowWidth": 390,
    "windowHeight": 710,
    "pixelRatio": 3.0000001192092896,
    "screenWidth": 390,
    "screenHeight": 753,
    "statusBarHeight": 0,
    "safeArea": {
        "left": 0,
        "right": 390,
        "top": 0,
        "bottom": 720,
        "width": 390,
        "height": 720
    },
    "safeAreaInsets": {
        "top": 0,
        "right": 0,
        "bottom": 34,
        "left": 0
    },
    "screenTop": 43
}

============================
uni.getWindowInfo() >> H5公众号 - 安卓机Nexus 6
============================
{
    "windowTop": 44,
    "windowBottom": 0,
    "windowWidth": 412,
    "windowHeight": 620,
    "pixelRatio": 3.0000001192092896,
    "screenWidth": 412,
    "screenHeight": 664,
    "statusBarHeight": 0,
    "safeArea": {
        "left": 0,
        "right": 412,
        "top": 0,
        "bottom": 664,
        "width": 412,
        "height": 664
    },
    "safeAreaInsets": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
    },
    "screenTop": 44
}
相关推荐
小徐_23332 天前
Wot UI 2.2.0 发布:Button 新增 subtle,VideoPreview 预览体验继续增强
前端·微信小程序·uni-app
宸翰3 天前
解决 uni-app App 端 vue-i18n 占位符丢失:封装跨端可用的 tf 格式化方法
前端·vue.js·uni-app
时光足迹4 天前
uni-app 视频通话实战:康复师与患者视频问诊的 6 个致命 Bug 与解决方案
android·ios·uni-app
时光足迹4 天前
腾讯云 TRTC UniApp SDK 从入门到上线
前端·vue.js·uni-app
时光足迹4 天前
uni-app 里把加密视频嵌入页面播放?我分析了 4 种方案,只有 1 种接近完美
前端·vue.js·uni-app
时光足迹4 天前
JPush UniApp UTS 插件完全参考手册:API、事件与厂商通道一网打尽
vue.js·ios·uni-app
时光足迹4 天前
极光推送全攻略(下):uni-app 代码实现与 iOS 排查实战
vue.js·ios·uni-app
时光足迹4 天前
极光推送全攻略(上):被iOS证书折磨了三天,我写了一份前端也能看懂的避坑指南
前端·ios·uni-app
spmcor6 天前
身份证读卡“无感登录”方案实践:从手动点击到自动检测
uni-app
PedroQue996 天前
uni-router v1.8.0新增冷启动守卫补执行
前端·uni-app