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

本文主要是介绍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
}

这篇关于uniapp可视范围高度 - 用户屏幕可操作的屏幕高度 - 适用于APP、H5@公众号、纯H5@Chrome的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/825343

相关文章

使用Java填充Word模板的操作指南

《使用Java填充Word模板的操作指南》本文介绍了Java填充Word模板的实现方法,包括文本、列表和复选框的填充,首先通过Word域功能设置模板变量,然后使用poi-tl、aspose-words... 目录前言一、设置word模板普通字段列表字段复选框二、代码1. 引入POM2. 模板放入项目3.代码

Spring Boot分层架构详解之从Controller到Service再到Mapper的完整流程(用户管理系统为例)

《SpringBoot分层架构详解之从Controller到Service再到Mapper的完整流程(用户管理系统为例)》本文将以一个实际案例(用户管理系统)为例,详细解析SpringBoot中Co... 目录引言:为什么学习Spring Boot分层架构?第一部分:Spring Boot的整体架构1.1

利用Python操作Word文档页码的实际应用

《利用Python操作Word文档页码的实际应用》在撰写长篇文档时,经常需要将文档分成多个节,每个节都需要单独的页码,下面:本文主要介绍利用Python操作Word文档页码的相关资料,文中通过代码... 目录需求:文档详情:要求:该程序的功能是:总结需求:一次性处理24个文档的页码。文档详情:1、每个

Python内存管理机制之垃圾回收与引用计数操作全过程

《Python内存管理机制之垃圾回收与引用计数操作全过程》SQLAlchemy是Python中最流行的ORM(对象关系映射)框架之一,它提供了高效且灵活的数据库操作方式,本文将介绍如何使用SQLAlc... 目录安装核心概念连接数据库定义数据模型创建数据库表基本CRUD操作创建数据读取数据更新数据删除数据查

Go语言中json操作的实现

《Go语言中json操作的实现》本文主要介绍了Go语言中的json操作的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录 一、jsOChina编程N 与 Go 类型对应关系️ 二、基本操作:编码与解码 三、结构体标签(Struc

k8s admin用户生成token方式

《k8sadmin用户生成token方式》用户使用Kubernetes1.28创建admin命名空间并部署,通过ClusterRoleBinding为jenkins用户授权集群级权限,生成并获取其t... 目录k8s admin用户生成token创建一个admin的命名空间查看k8s namespace 的

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

Python屏幕抓取和录制的详细代码示例

《Python屏幕抓取和录制的详细代码示例》随着现代计算机性能的提高和网络速度的加快,越来越多的用户需要对他们的屏幕进行录制,:本文主要介绍Python屏幕抓取和录制的相关资料,需要的朋友可以参考... 目录一、常用 python 屏幕抓取库二、pyautogui 截屏示例三、mss 高性能截图四、Pill

Java 字符串操作之contains 和 substring 方法最佳实践与常见问题

《Java字符串操作之contains和substring方法最佳实践与常见问题》本文给大家详细介绍Java字符串操作之contains和substring方法最佳实践与常见问题,本文结合实例... 目录一、contains 方法详解1. 方法定义与语法2. 底层实现原理3. 使用示例4. 注意事项二、su

Java Stream流与使用操作指南

《JavaStream流与使用操作指南》Stream不是数据结构,而是一种高级的数据处理工具,允许你以声明式的方式处理数据集合,类似于SQL语句操作数据库,本文给大家介绍JavaStream流与使用... 目录一、什么是stream流二、创建stream流1.单列集合创建stream流2.双列集合创建str