iOS iPadOS safari 独立Web应用屏幕旋转的时候 onresize window.innerHeight 数值不对。

news/2024/11/7 9:35:31/

iOS iPadOS safari 独立Web应用屏幕旋转的时候 onresize window.innerHeight 数值不对

一、问题描述

我有一个日记应用,是可以作为独立 Web 应用运行的那种,但在旋转屏幕的时候获取到的 window.innerHeightwindow.innerWidth 就不对了,不是屏幕的正常尺寸。导致内容显示不正常。iPhone和 iPad 上都是这样的。

本来应该是这样的。
请添加图片描述
在旋转一次再转回来的时候就成了这样

请添加图片描述

我在程序里是这样写的:

window.onresize = () => {this.SET_INSETS({windowsHeight: window.innerHeight,windowsWidth: window.innerWidth,heightPanel: window.innerHeight - 45, // 除 navbar 的高度})
}

二、问题解决

搜了下 google 找到了解决办法:虽然 window.innerHeightwindow.innerWidth 的数值不对,但 document.documentElementclientHeightclientWidth 是对的。

window.onresize = () => {this.SET_INSETS({windowsHeight: window.innerHeight,windowsWidth: window.innerWidth,heightPanel: window.innerHeight - 45, // 除 navbar 的高度})console.log('window.innerHeight:', window.innerHeight, window.innerWidth)console.log('clientWidth:', document.documentElement.clientWidth, document.documentElement.clientHeight)
}

加上这两个输出能看到结果,在屏幕旋转的时候 clientHeightclientWidth 的数值是正确的。

请添加图片描述

三、结果

换获取高度和宽度的途径换成 document.documentElement.clientHeightdocument.documentElement.clientWidth 就好了


http://www.ppmy.cn/news/762568.html

相关文章

Scala作业(9)---模式匹配高阶函数

模式匹配 1、利用模式匹配,编写一个swap函数,接受一个整数的对偶,返回对偶的两个组成部件互换位置的新对偶 下面是使用模式匹配编写的 swap 函数,接受一个整数的对偶,返回对偶的两个组成部分互换位置的新对偶&#x…

优惠寄快递分销版小程序怎么样?如何做到月赚3W+

分享一下那些价格只需4元起寄快递的小程序是如何实现的。这个项目应该很多人都不陌生,因为它的需求量很大。 很多人在日常生活中可能都曾经在某宝找过这样的店铺来帮助自己以更便宜的价格寄快递。 根据我的了解,这些平台可以比正常的官网和驿站寄快递便…

基于matlab显示城市街区场景中配备立体摄像机的无人机开发视觉SLAM算法(附源码)

一、前言 视觉SLAM是计算摄像机相对于周围环境的位置和方向,同时映射环境的过程。开发可视化 SLAM 算法并评估其在不同条件下的性能是一项具有挑战性的任务。最大的挑战之一是生成相机传感器的地面实况,尤其是在户外环境中。使用仿真可以在各种场景和相…

高校学生快递包装回收行为意愿分析

目 录 摘 要 I Abstract II 目 录 III 1 引 言 1 1.1 研究背景 1 1.2 研究意义 1 1.3 研究方法 2 1.4 研究内容及论文框架 2 2 研究现状及相关理论概述 4 2.1 研究现状 4 2.2 相关理论概述 5 3 研究假设与模型构建 6 3.1 研究假设 6 3.2 高校学生对快递包装回收的行为意愿理论…

什么是人工智能大模型?

目录 1. 人工智能大模型的概述:2. 典型的人工智能大模型:3. 人工智能大模型的应用领域:4. 人工智能大模型的挑战与未来:5. 人工智能大模型的开发和应用:6. 人工智能大模型的学习资源: 人工智能大模型是指具…

Linux之系统定时任务

系统定时任务 需开启crond服务 Linux crontab 是用来定期执行程序的命令。 当安装完成操作系统之后,默认便会启动此任务调度命令。 crond 命令每分钟会定期检查是否有要执行的工作,如果有要执行的工作便会自动执行该工作。 若crond服务没有启动&…

微信视频通话测试用例?

功能测试: 视频能否连接成功,声音和画面是否正常,能否同步,挂断功能是否正常,单人视频和多人视频是否正常; 性能测试: 压力测试--长时间视频(如12小时)是否能保持正常…

测试用例-微信视频通话

对微信视频通话从以下几个方面进行测试:功能、性能、兼容性、易用性、界面 不完善的地方,欢迎大家补充噢