首页
学习
活动
专区
工具
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.1K90

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

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

    2.7K10

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

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

    36530

    亲手打造属于你 React Hooks

    我们需要删除添加滚动事件监听器,这样就不会尝试更新不再存在状态变量。 我们可以通过从useEffectwindow返回一个函数来实现这一点。...在这种情况下,我们可以为浏览器返回默认宽度高度,例如,一个对象内1200800: // 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.innerWidthWindow.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.如何获取事件对象:只需要在事件函数中添加一个参数即可 我们注册事件时候会写一个函数告诉浏览器这个事件被触发就调用这个函数...xy e.screenY e.screenX 2.浏览器可视区域,距离触发事件那一点xy e.clientY e.clientX 3.页面的左上角(哪怕页面滚走了,还是页面左上角),距离触发事件那一点

    69100

    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); }

    49410

    bom笔记

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

    83830

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

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

    8.1K30

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

    Android ,因为各个软件使用浏览器渲染引擎不一样,所以直播卖货系统页面播放效果差异也很大,这里主要以微信为主。微信使用是腾讯浏览器自带X5内核。...这就导致直播卖货系统H5页面androidiOS微信中部分表现差异,但由于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文档标签。...--显示浏览器窗口实际尺寸--> 浏览器窗口 实际高度: 浏览器窗口 实际宽度: <input...(2)随后JavaScript代码中,首先定义了两个变量winWidthwinHeight,用于保存窗口高度宽度。...(3)然后,函数findDimensions ( )中,使用window.innerHeightwindow.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故障导致产品出现大面积影响事件并不少见。

    10.5K45
    领券