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

相关文章

Python 中的 with open文件操作的最佳实践

《Python中的withopen文件操作的最佳实践》在Python中,withopen()提供了一个简洁而安全的方式来处理文件操作,它不仅能确保文件在操作完成后自动关闭,还能处理文件操作中的异... 目录什么是 with open()?为什么使用 with open()?使用 with open() 进行

Linux ls命令操作详解

《Linuxls命令操作详解》通过ls命令,我们可以查看指定目录下的文件和子目录,并结合不同的选项获取详细的文件信息,如权限、大小、修改时间等,:本文主要介绍Linuxls命令详解,需要的朋友可... 目录1. 命令简介2. 命令的基本语法和用法2.1 语法格式2.2 使用示例2.2.1 列出当前目录下的文

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage