首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

window.onresize事件,innerHeight和innerWidth在ipad chrome浏览器上返回错误的值

window.onresize事件是在窗口大小改变时触发的事件。innerHeight和innerWidth是窗口的内部高度和宽度。

在iPad Chrome浏览器上返回错误的值可能是由于以下原因之一:

  1. 浏览器兼容性问题:不同浏览器对于innerHeight和innerWidth的计算方式可能存在差异,导致在某些浏览器上返回错误的值。可以通过检测浏览器类型并采取相应的兼容性处理来解决这个问题。
  2. 缩放设置问题:iPad上的Chrome浏览器可能受到缩放设置的影响,导致innerHeight和innerWidth的值不准确。可以尝试调整浏览器的缩放设置或者使用其他方法来获取准确的窗口尺寸。

为了解决这个问题,可以尝试使用其他方法来获取窗口的大小,比如使用document.documentElement.clientHeight和document.documentElement.clientWidth来获取可见区域的大小。示例代码如下:

代码语言:txt
复制
function getWindowSize() {
  var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  return { width: width, height: height };
}

window.addEventListener('resize', function() {
  var size = getWindowSize();
  console.log('Window size: ' + size.width + 'x' + size.height);
});

这段代码会在窗口大小改变时打印出准确的窗口尺寸。

对于推荐的腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的品牌商,无法提供相关链接。但腾讯云提供了丰富的云计算产品和服务,可以通过腾讯云官方网站或者腾讯云文档来了解和查找相关产品信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • ASP.NET AJAX(12)__浏览器兼容功能判断浏览器的类型和版本Sys.Browser针对DOM元素的兼容操作针对DOM事件的兼容操作

    Library 判断浏览器的类型和版本 浏览器兼容层的优势在于,我们可以使用同样的编码方式,让相同的代码在不同浏览器下的表现统一,因为在这个兼容层内部,分别实现了或者规避了一些浏览器的不同的实现,但是不同的浏览器的某些差异难以使用框架来保证...,因此提供显式的判断浏览器的类型和版本是必不可少的 Sys.Browser 通过windows.navigator.userAgent来判断 Sys.Brower.agent表示浏览器类型(可能的值InternetExplorer...这里我要提一下,其实Microsoft AJAX Library是没有直接的提供chrome的支持的,我这里使用它进行测试,完全是因为我这里只装了这三种浏览器,在chrome下,很多东西得出的结果是不正确的...,只是让大家明白这里的不同,不要太多关注与它对chrome的支持 同样,这里我们也可以看到,在取到浏览器的尺寸的时候,各种浏览器的取得方法,是完全不相同的,这就是我们前面提到的对于DOM操作方式却大相径庭.../offsetY:鼠标在触发事件的对象中的相对位置 Sys.UI.DomEvent.rawEvent:浏览器原生事件对象 一个针对DOM事件的兼容操作的示例 创建一个asp页面,我们如果没有这个浏览器兼容层的情况下

    1.2K90

    跨浏览器获取不同环境的window窗口宽度和高度

    IE9+、Firefox、Safari、Opera和Chrome均为此提供了4个属性: innerWidth 、 innerHeight 、 outerWidth 和 outerHeight 。...在IE9+、Safari和Firefox中,outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。...在Opera中,这两个属性的值表示页面视图容器的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小(减去边框宽度)。...在Chrome中, outerWidth 、 outerHeight 与 innerWidth 、 innerHeight 返回的值相同,即视口(viewport)大小而非浏览器窗口大小。...和 window.innerHeight 保存着可见视口,也就是屏幕上可见页面区域的大小。

    2.7K10

    JavaScript 高频函数优化-函数防抖&函数节流

    用户在设定的时间内进行高频操作则不触发业务逻辑代码,如果没有进行高频操作则触发逻辑代码 实现原理 利用定时器:如果用户在指定的时间不断的高频操作,在操做过程中不断对定时器进行开启和关闭,业务逻辑代码写到到定时器的回调函数中...高频函数不断的触发过程中,业务逻辑代码以设定的时间为间隔进行触发 实现原理 利用某一变量作为定时器开启和关闭的条件,只要定时器没有执行完成,即使高频函数在不断进行触发,也不会重新开启或关闭定时器,业务逻辑代码写在定时器的回调函数中...--模拟百度搜索输入框效果,在每次输入之后会有不同的搜索信息返回--> ​ 的宽高在浏览器窗口大小改变时,永远等于可视区域宽高的一半--> ​ 的重启和关闭,这样就能保证,即使高频函数在不断触发,也能保证业务代码在500ms间断触发 ​ 代码含义就是只有if条件语句的条件判断为假才会执行定时器的代码

    37030

    亲手打造属于你的 React Hooks

    我们需要删除添加的滚动事件监听器,这样就不会尝试更新不再存在的状态变量。 我们可以通过从useEffect和window返回一个函数来实现这一点。...在这种情况下,我们可以为浏览器返回默认的宽度和高度,例如,在一个对象内1200和800: // utils/useWindowSize.js import React from "react"; export...我们将创建一个名为isSSR的变量,它将执行相同的检查,以查看窗口是否等于未定义的字符串。 我们将使用三元值来设置宽度和高度首先检查我们是否在服务器上。...useDeviceDetect Hook 我正在构建一个新的登录页面时,我在移动设备上经历了一个非常奇怪的错误。在台式电脑上,这些样式看起来很棒。...最后,我们将从该钩子返回一个对象,这样如果我们想给该钩子添加更多的功能,就可以在将来添加更多的值。

    10.1K60

    JavaScript小技能: 应用程序接口​

    : 调用 fetch() 将返回一个“响应”或抛出一个错误 在适当的地方有额外的安全机制: 在代码中启用一些 WebAPI 请求权限,例如定位权限和通知权限 1.1 JavaScript、API和其他...II 客户端 API(浏览器 API) 在这里插入图片描述 window 是载入浏览器的标签,使用这个对象可返回窗口的大小(Window.innerWidth和Window.innerHeight),...navigator 表示浏览器存在于 web 上的状态和标识。你可以用这个对象获取地理信息、用户偏爱的语言、多媒体流。 // 1....函数:`go(url);` document(在浏览器中用 DOM 表示)是载入窗口的实际页面,可以用这个对象来返回和操作文档中 HTML 和 CSS 上的信息。...我们可以通过Window.onresize 事件处理程序来访问它,并返回每次改变大小的代码。

    1.3K30

    前端day15-JS(WebApi)学习笔记(三大家族、事件对象、getComputedStyle)

    clientTop/clientLeft:不常用,其实就是左边框border-left和上边框border-top 4.png 1.监听浏览器窗口变化的事件: window.onresize() 2....获取页面的可视区域 存在浏览器兼容问题,兼容情况与scroll家族基本类似 谷歌/火狐 : window.innerWidth window. innerHeight IE浏览器: document.documentElement.clientWidth...) 1.什么是事件对象event:当某一个事件被触发时(例如点击事件),此时浏览器会记录触发时的某些信息, 例如你是在哪个位置点击的,你在点击的时候是直接鼠标左键点击的,还是鼠标左右键一起点击(骚操作)...的等等 浏览器把这些所有的信息放到一个变量中存储,这个变量的数据类型是对象,所以称之为事件对象 2.如何获取事件对象:只需要在事件函数中添加一个参数即可 我们在注册事件的时候会写一个函数告诉浏览器这个事件被触发就调用这个函数...x值和y值 e.screenY e.screenX 2.浏览器可视区域,距离触发事件的那一点的x值和y值 e.clientY e.clientX 3.页面的左上角(哪怕页面滚走了,还是页面左上角),距离触发事件的那一点的

    70100

    JavaScript学习笔记011-DOM页面元素的运用

    后来在一次员工会议上,老总又提到这件事,他说 分公司很多人对网络部不满意,觉得你们做事不靠谱,连打印机都不会修 当时很想问他一句话 你会开车,那就一定得要会修车是吗 想想算了,跟一个完全不懂网络的大伯解释软件与硬件问题...window.innerWidth; // 浏览器窗口宽度 window.innerHeight; // 浏览器窗口高度 document.documentElement.clientWidth; /...e: 主流浏览器:事件函数的第一个形参 低版本IE浏览器:window.event */ } /* 鼠标相关: clientX clientX // 鼠标点击的位置相对于当前文档可视区窗口左上角的坐标...; // 兼容写法 console.log(e.key); } /* 键盘相关: key // 按下的键 keyCode // 键对应的值 */ window.onresize = function...(){ // 窗口变化事件 console.log(window.innerWidth); }

    49510

    bom笔记

    三、window的常用属性 1、window.innerHeight,window.innerWidth 网页的CSS布局占据的浏览器窗口的高度和宽度,单位为像素 当放大和缩小网页的时候,浏览器窗口的宽高会改变...比如window的chrome或者是用mac的chrome之类的 ?...在对话框弹出期间,浏览器窗口处于冻结状态,如果不点“确定”按钮,用户什么也干不了。 alert('hello,浏览器告诉我谁是世界上最美的女人,是我吗') ?...prompt方法的返回值是一个字符串(有可能为空)或者null,具体分成三种情况。 用户输入信息,并点击“确定”,则用户输入的信息就是返回值。...用户没有输入信息,直接点击“确定”,则输入框的默认值就是返回值。 用户点击了“取消”(或者按了Escape按钮),则返回值是null。

    83930

    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下...Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。 Document对象的body属性对应HTML文档的标签。...--显示浏览器窗口的实际尺寸--> 浏览器窗口 的 实际高度: 浏览器窗口 的 实际宽度:...(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。...(3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。

    8.1K30

    关于直播卖货系统平台在微信浏览器中音视频播放的问题

    Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以直播卖货系统页面播放的效果差异也很大,这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。...这就导致直播卖货系统H5页面在android和iOS微信中的部分表现差异,但由于X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎,所以除了对video标签的挟持,和下载页跳转被腾讯应用宝挟持外,其他表现上还没有遇到特别折磨人的差别...="true" //webkit内核 x5-playsinline="true" //X5内核 2.直播卖货系统音视频自动播放问题 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器...监听resize事件实现自适应视口大小变化,视频播放时会调整视口大小 ```javascript window.onresize = function(){ video.style.width...= window.innerWidth + "px"; video.style.height = window.innerHeight + "px"; } ``` 2.

    1.2K20

    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

    要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要 深入Document内部对body进行检测;在DOM环境下...Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。 Document对象的body属性对应HTML文档的标签。...--显示浏览器窗口的实际尺寸--> 浏览器窗口 的 实际高度: 浏览器窗口 的 实际宽度: 在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。...(3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。

    16.2K10

    目前为止整理最全的前端监控体系搭建篇(长文预警)

    experience 2.3 业务 business pv:页面浏览量和点击量 uv:访问某个站点的不同ip的人数 用户在每一个页面的停留时间 3....通过可视化交互的手段,代替代码埋点 将业务代码和埋点代码分离,提供一个可视化交互的页面,输入为业务代码,通过这个系统,可以在业务代码中自定义的增加埋点事件等等,最后输出的代码耦合了业务代码和埋点代码...} //screen.width 屏幕的宽度 screen.height 屏幕的高度 //window.innerWidth 去除工具条与滚动条的窗口宽度 window.innerHeight 去除工具条与滚动条的窗口高度...domInteractive-fetchStart DOM树解析完成时间,此时document.readyState为interactive 首包时间耗时 首包时间 responseStart-domainLookupStart DNS解析到响应返回给浏览器第一个字节的时间...dns监控 dns是网络应用的基础,在实际的对外服务产品中,多数都对域名有依赖。dns故障导致产品出现大面积影响的事件并不少见。

    11.8K45
    领券