浏览器的尺寸测量差异:window.outerwidth 与 window.innerwidth
在浏览器调试窗口中,window.outerWidth 和 window.innerWidth 打印的尺寸不一致,而且 window.innerWidth 大于 window.outerWidth。这个问题通常与 viewport 元数据的设置有关。
在加载页面后,浏览器需要时间来更新 viewport 元数据。因此,在页面加载后的最初几秒内,window.innerWidth 可能与调试窗口显示的尺寸不一致。过一段时间后,浏览器会更新 viewport 元数据,window.innerWidth 会与显示的尺寸一致。
如果您在页面
部分中添加了以下 viewport 元数据:
登录后复制
浏览器将根据设备宽度调整 viewport,并将其初始缩放比例设置为 1。这意味着 window.innerWidth 应该与设备的实际宽度一致。
如果您在读取 outerWidth 和 innerWidth 时遇到问题,可以输出 viewport 元数据的值,查看是否有异常:
console.log(window.outerWidth);console.log(window.innerWidth);console.log(document.querySelector('meta[name="viewport"]').content);
登录后复制
以上就是为什么 window.outerWidth 和 window.innerWidth 在调试窗口中显示不一致?的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2801537.html