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

news2024/9/27 15:27:28

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.coloradmin.cn/o/712376.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C#】使用System.Data.SqlClient 进行简单批量操作

在实际项目开发中,可能会在定时任务里进行批量添加的操作,或者需要写一些小工具进行批量添加测试。 此篇文章就是使用System.Data.SqlClient 进行简单批量操作。 目录 1、批量插入数据1.1、示例代码1.2、列映射1.3、是否需要映射列 2、批量更新数据3、链…

ZigBee组网-基于协议栈的UART实验(实现收发)(保姆级)

目录 基于协议栈的UART实验 前言 协议栈中的TI自带UART的使用实验 UART配置基本步骤 串口初始化 串口发送 串口接收回显 实验效果 拓展 移植我们自己UART串口 移植配置过程 实验效果 基于协议栈的UART实验 前言 与之前的Zigbee裸机实验不同,我们既可以…

神奇的MATLAB解密工具,让你轻松解密.p文件!

大家都知道,MATLAB是一款功能强大的数学软件,但是在进行代码保护和共享方面,却存在一些困难。这时候,一款优秀的MATLAB解密工具就显得尤为重要。它可以帮助我们解决诸多问题,比如.p文件解密、p文件转m代码等。接下来&a…

mallocstacklogging和MallocStackLoggingNoCompact引起的app文稿数据快速增加

最近由于定位一个iOS16系统适配引起的闪退设置了mallocstacklogging和MallocStackLoggingNoCompact。 配置如下: 在上线前测试,结果发现手机存储空间不足。删除了手机的很多图片后,测试不到两分钟,手机存储空间又不足了。查看app…

Flink运行原理

Apache Flink是什么?对于这个问题,Apache软件基金会官方给出了定义:Flink是一种框架和分布式处理引擎,主要用于对无界和有界数据流进行有状态计算。 本文将从以下几个方面来了解flink运行原理: 【Flink运行时四大组件…

骨传导耳机可以长期佩戴吗,几款佩戴舒适的骨传导耳机清单

骨传导耳机是通过耳朵传声方式,提高了听神经的使用频率,对听觉系统所产生刺激会随之下降。目前骨传导耳机主要应用于运动和娱乐两大领域,尤其是在运动场景中骨传导耳机能够避免传统耳机因佩戴入耳式耳机造成的听力下降问题,更能增…

Python批量将doc转成docx并读取docx的内容

有时候我们需要将doc的文件转成docx的格式,但是如果直接修改文件名后缀的话有时候会没有效果,今天我们利用python批量将doc后缀的word文档转成docx的格式。 也找了很多方法,最终还是找到了就是利用win32com去解决这个问题 很多人在执行这一…

【MySQL】不就是事务

前言 嗨咯,小伙伴们大家好呀,我已经一个星期没有更新了,实在抱歉!本期我们要学习MySQL初阶中的最后一课,MySQL数据库中的事务也算是近几年面试必考的问题,所以我们一定要认真学习。 目录 前言 目录 一、事…

学会用智慧轻松的方式过生活

曾经,有位远在黑龙江的女性福主告诉峰民,她说她活不久了。 峰民很是惊讶,不可能吧,你才39岁啊, 她说:我查出了子宫有瘤,峰民听后就说,没事,放心,肯定是良性。…

Python3,处理Excel文件IO流的方法那么多,或许只有Pandas算得上靠谱。

Pandas处理Excel文件IO流的方法 1、引言2、代码实例2.1 什么是文件IO流2.1.1定义2.1.2 字节流、字符流 2.2 常见的Excel文件IO流处理方法2.3 Pandas处理Excel文件IO流2.3.1 直接读取处理2.3.2 转换io流进行处理 3、总结 1、引言 小屌丝:鱼哥, 求助。 小…

深度学习技巧应用22-构建万能数据生成类的技巧,适用于CNN,RNN,GNN模型的调试与训练贯通

大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用22-构建万能数据生成类的技巧,适用于CNN,RNN,GNN模型的调试与训练贯通。本文将实现了一个万能数据生成类的编写,并使用PyTorch框架训练CNN、RNN和GNN模型。 目录&#xff1…

摄像机控制——旁轴摇移

通常摄像机进行摇移控制的时候,都是以摄像机正前方中心位置作为注视点进行环绕控制的,如果在注释点位置有物体,那么感受上是围绕着该物体进行观察。 但是最近公司的策划要求摇移时候的围绕点是鼠标点击的位置,而不是摄像机的正中心…

零基础网络安全学习路线,真的很全,建议收藏!!!

很多小伙伴在网上搜索网络安全时,会出来网络安全工程师这样一个职位,它的范围很广,只要是与网络安全挂钩的技术人员都算网络安全工程师,一些小伙伴就有疑问了,网络安全现在真的很火吗? 那么今天博主就带大…

从0实现基于Linux socket聊天室-多线程服务器模型(一)

前言Socket在实际系统程序开发当中,应用非常广泛,也非常重要。实际应用中服务器经常需要支持多个客户端连接,实现高并发服务器模型显得尤为重要。高并发服务器从简单的循环服务器模型处理少量网络并发请求,演进到解决C10K&#xf…

AntDB数据库将携创新性解决方案亮相2023可信数据库发展大会

由中国通信标准化协会指导,中国通信标准化协会大数据技术标准推进委员会(CCSA TC601)主办的“2023可信数据库发展大会”将于2023年7月4日——5日在北京国际会议中心召开。作为深耕通信行业15年的国产数据库产品,AntDB受邀参会&…

记录一下kibana启动链接报错问题(kibana server is not ready yet)

记录一下kibana启动链接报错问题(kibana server is not ready yet) 今天启动kibana出现该问题 先去看了看是否是elasticsearch连接出错 启动了容器 docker start elasticsearch docker start kibana进入了kibana容器 docker exec -it kibana bash进行了下面的操作&#xf…

No suitable driver found for

在学习Mbatis时候遇到的奇怪的问题,报错提示如图所示,提示找不到数据库驱动 检查db.properties文件,一开始认为没问题 drivercom.mysql.jdbc.Driver urljdbc:mysql://localhost:3306/mybatis?useSSLfalse&useUnicodetrue&characterEncodingUTF…

华为OD机试真题2023Q1 100分 + 2023 B卷(JavaPythonJavaScript)

目录 2023 5月 B卷 “新加题”(100分值)2023Q1 100分下面分享一道“2023Q1 200分 机器人活动区域”的解题思路一、题目描述二、输入描述三、输出描述四、解题思路五、Python算法源码六、效果展示1、输入2、输出 大家好,我是哪吒。 五月份之前…

react基础-生命周期render props模式高阶组件原理揭秘

组件生命周期(★★★) 目标 说出组件生命周期对应的钩子函数钩子函数调用的时机 概述 意义:组件的生命周期有助于理解组件的运行方式,完成更复杂的组件功能、分析组件错误原因等 组件的生命周期: 组件从被创建到挂…

通用机器人里程碑?谷歌展示全球首个多任务AI智能体

目录 两大硬核科技支撑通用机器人研发(1)自生成训练数据(2)基于多模态模型 科技巨头同台比拼 中国产业链凸显性价比优势发展初期硬件先行 运动模块价值量最高 已学会套圈、搭积木、抓水果…… 人工智能和机器人,总是不…