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

可视范围高度

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

官方手册

uni.getWindowInfo() | uni-app官网uni-app,uniCloud,serverless,uni.getWindowInfo()icon-default.png?t=N7T8https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html

实测数据


============================
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
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/549415.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何将大华dav视频转mp4?一键无损清晰转换~

Digital Audio Video(DAV)文件格式源于数字监控领域,旨在解决视频监控数据的存储和回放问题。随着数字监控技术的发展,DAV格式逐渐成为监控设备记录视频的标准格式,广泛应用于安防系统、摄像头监控等场景。 MP4文件格式…

Python基础(六)之数值类型元组

Python基础(六)之数值类型元组 1、简介 元组: 在Python中是内置的数据结构之一,是一个不可变的序列,切可以是任何类型数据。元组的元素放在()小括号内。一般我们希望数据不改变的时候使用 不可变与可变的…

多目标进化算法——NSGA-II(python实现)

目录 前言NSGA-II非支配排序支配关系非支配关系非支配排序算法算法思想算法伪代码伪代码释义Python代码实现 过渡1拥挤度距离排序算法思想算法伪代码Python代码实现 过渡2二元锦标赛 精英选择策略选择交叉变异生成新种群选择交叉变异Python代码实现 整体流程图测试函数与结果 其…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Circle)

用于绘制圆形的组件。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Circle(options?: {width?: string | number, height?: string | number}) 从API version 9开始&…

【Node.js从基础到高级运用】十四、Node.js 错误处理与日志记录

引言 在这篇博客文章中,我们将深入探讨Node.js中的错误处理和日志记录的最佳实践。我们会了解如何在Node.js应用程序中有效地捕获和处理错误,并利用日志库如morgan来记录应用程序的活动和错误信息。 第1部分:Node.js中的错误处理 同步代码中…

母婴用品网站|基于jsp技术+ Mysql+Java的母婴用品网站设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 1. 前台功能效果图 2. 管理员功能效果图 3. 用户功能 4. 系统功能设计 5. 数据库E-R图设计 6. lu…

OpenCV Steger算法提取条纹中心线

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 Steger 算法是一种常用的图像边缘检测算法,可以用于提取图像中的中心线或边缘信息。它的理论假设是:条纹的亮度是按照高斯分布呈现的,即中心亮两侧渐暗。 其计算过程如下所述: 1、首先,我们需要计算每个点Hess…

el-upload的多个文件与单个文件上传

样式图&#xff1a; 场景多个&#xff1a; 使用el-upload上传多个文件 <el-upload class"upload-demo" :action"uploadUrl" :on-remove"handleRemove1":on-success"handleAvatarSuccess1" multiple :limit"5" :on-exc…

抖音视频爬虫采集工具界面图解|视频批量提取软件

抖音视频爬虫界面图解 一&#xff1a;概述 主要功能&#xff1a;关键词批量提取视频和单独视频提取&#xff0c;提取后下载功能 二&#xff1a;功能解析 2.1&#xff1a;关键词批量提取视频的解析 对某个关键词进行搜索和视频提取&#xff0c;例如输入汽车配件&#xf…

Flutter-自定义表情雨下落动画

简述 今天给大家分享一个Flutter的表情雨的实现&#xff0c;具体的效果见下图&#xff0c;这个效果其实是工作中的一个小小的需求&#xff0c;这里面单独拿出来讲讲下这个效果的实现思路。 在以前特别是新手&#xff0c;遇到一些动画效果都是拿到需求后&#xff0c;在网络上去…

机器人可反向驱动能力与力控架构

反向驱动性是电机传动系统的机械特性&#xff0c;它描述了运动是否可以轻松反转 。特别是&#xff0c;反向驱动能力取决于两个因素&#xff1a;传动运动效率和整体执行器机械阻抗。反向运动中传动装置的低运动效率意味着所施加的外力的大部分被运动反作用力抵消。然而&#xff…

sheng的学习笔记-AI-残差网络-Residual Networks (ResNets)

目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 非常非常深的神经网络&#xff0c;网络发生了退化&#xff08;degradation&#xff09;的现象&#xff1a;随着网络层数的增多&#xff0c;训练集loss逐渐下降&#xff0c;然后趋于饱和&#xff0c;当你再增加网络深度的话&am…