窗口大小 window.innerWidth 、window.innerHeight、document.documentElement.clientWidth、

最新推荐文章于 2025-02-12 15:29:54 发布

原创最新推荐文章于 2025-02-12 15:29:54 发布 · 872 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种跨浏览器兼容的方法来获取当前浏览器视口的宽度和高度，适用于IE、Firefox、Chrome、Safari和Opera等浏览器，并区分了标准兼容模式（CSS1Compat）和后退兼容模式（BackCompat）。

部署运行你感兴趣的模型镜像

/ Firefox、Chrome、Safari、Opera 支持 ; window.innerWidth 没有减去右边下拉条

var pageWidth = window.innerWidth,

pageHeight = window.innerHeight;

//IE、Firefox、Chrome、Safari、Opera 支持 ;

if(typeof pageWidth != 'number')

{

// CSS1Compat：标准兼容模式开启。

if(document.compatMode == 'CSS1Compat'){

pageWidth = document.documentElement.clientWidth;

pageHeight = document.documentElement.clientHeight;

} else {

// BackCompat：标准兼容模式关闭。

pageWidth = document.body.clientWidth;

pageHeight = document.body.clientHeight;

}

// IE、Firefox、Chrome、Safari、Opera 支持，

// document.documentElement.clientWidth 减去右边下拉条。

// CSS1Compat：标准兼容模式开启。

if(document.compatMode == 'CSS1Compat'){

pageWidth = document.documentElement.clientWidth;

pageHeight = document.documentElement.clientHeight;

} else {

// BackCompat：标准兼容模式关闭。

pageWidth = document.body.clientWidth;

pageHeight = document.body.clientHeight;

}

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_15118

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

了解 HTML 中的window、document、body和元素的尺寸及位置

一名全栈开发工程师

05-27

1408

本文将详细介绍与窗口（window）、文档（document）、主体（body）以及其他 HTML 元素的尺寸和位置相关的属性及方法。

前端小白菜学习之BOM（window、innerWidth、innerHeight、addEventListener、localStorage、seesionStorage等

weixin_41360298的博客

02-09

1186

我们今天一起“BOM BOM BOM”，DJ， Music。哈哈哈，停止你的舞姿，今天我们一起来讨论讨论浏览器的BOM BOM BOM，记住了么。好，进来坐下吧，聊起来！欢迎评论点赞转发关注，一键四连

参与评论您还未登录，请先登录后发表或查看评论

关于window.innerHeight/innerWidth，document.documentElement.clientWidth/Height，document.body.clientWidt...

weixin_30516243的博客

12-04

971

一、window.innerWidth/Height => 获取浏览器可视区域宽/高度 ========①宽度：经测试，该属性获取的是包含滚动条宽度的（有的博客乃至菜鸟教程都认为他不包含）浏览器可视区域宽度②高度：但是高度却不包含工具栏高度，只是可视区域高度②IE 8 及更早 IE版本不支持这两个属性。=================== 二、document.documentEl...

JS Javascript获取用户视口宽(响应式准备) window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决

箜的博客

01-11

1794

JS Javascript 获取用户视口宽 window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决获取用户视口宽高为下一节响应式布局做准备包括滚动条的浏览器宽度高度获取方式 window.inner不包括滚动条的浏览器宽度高度获取方式当有文档声明时:document.documentElement当没有文档声明时:document.body 获取用户视口宽高为下一节响应式布局做准备包括滚动条的浏览器宽度高度获取方式 window.in

[js] 浏览器宽度 documentElement.clientWidth window.innerWidth

qq_14993591的博客

09-07

650

document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 // 浏览器大小改变事件 window.addEventListener( 'resize' , function(){ // 不包含浏览器滚动条宽度 var width1 = document

window.innerwidth documet.body.clientwidth

seven_begain的博客

05-18

630

就移动web前端这里是以iphone5做的例子 .head{ width:1200px; height:568px; background-color: yellow; } 我们可以看到window.innerwidth的值就是上面代码的width documet.body.clientwidth代表的就是我们的iphone自己设置的viewp

window.innerWidth、document.body.clientWidth和html的大小的区别

weixin_30765319的博客

12-15

696

　　首先，我们知道document.body指向的就是body元素，如此，我们就可以以document.body来获取body的大小。何以知之？如下代码： var body = document.querySelector('body'); console.log(body == document.body); 　　结果显示的是true。　　同样的document.documen...

document.body、document.documentElement和window获取视窗大小的区别

淡忘~浅思

10-03

3576

在w3school关于window对象的介绍中，介绍了获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight – 浏览器窗口的内部高度 window.innerWidth – 浏览器窗口的内部宽度对于 Internet Explorer 8、7、6、5： document.documentElement.clientHe

window.innerWidth获取到的宽度不对

12-29

width -= window.outerWidth - document.documentElement.clientWidth; } return width; } ``` - **利用ResizeObserver监控变化** 对于动态改变的内容区域，可以采用 ResizeObserver 来实时跟踪容器尺寸的变化...

详解JavaScript编程中的window与window.screen对象

09-21

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; ``` ...

取得窗口大小兼容所有浏览器的js代码.docx

01-22

综上所述，为了在所有浏览器中准确地获取窗口大小和位置，我们需要对`window.innerWidth`、`window.innerHeight`、`window.screenLeft`以及`window.screenTop`等属性进行兼容性处理。这样的代码能够确保在不同浏览器...

window视口的高度和宽度（兼容模式）

weixin_38551805的博客

04-09

836

浏览器窗口自身的精度尺寸不好确定，但是可以确定页面视口的大小 let pageWidth = window.innerWidth, pageHeight = window.innerHeight; // 首先检查pageWidth是不是一个数值，如果不是说明不兼容该属性 if(typeof pageWidth != "number") { // document.compatMode 来检查页面是否处于标准模式,如果是使用document.documentElement获取宽度和高度，如果

Window 尺寸

weixin_34319999的博客

02-19

212

Window 尺寸有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度对于 Int...

获取窗口大小

最新发布

weixin_43843897的博客

02-12

653

获取浏览器窗口的内部宽度（包括滚动条）。：获取浏览器窗口的内部高度（包括滚动条）。事件的回调函数中，更新窗口大小的值。

滚动距离、可视窗口大小的获取以及兼容模式写法

weixin_43933771的博客

07-16

570

获取滚动距离的兼容模式写法常规方法：（1）window.pageXOffset/pageYOffset （注意：IE8及以下是不支持的）（2）document.body.scrollLeft/scrollTop （注意：IE8及以下是支持的）（3）document.documentElement.scrollLeft/scrollTop （注意：IE8及以下是支持的）（4）window.scrollX/scrollY 兼容模式的封装写法： <script> //我们还是在这

详解clientWidth，scrollWidth，offsetWidth，innerWidth，outerWidth

qq_47443027的博客

11-25

3717

3.document.documentElement.offsetWidth：元素的内容宽度（不只是你能看到的部分，含滚动条/包含border）2.document.documentElement.scrollWidth：内容可滚动宽度（不只是你能看到的部分，不含滚动条）1.document.documentElement.clientWidth：可视区屏幕宽度（你能看到的页面部分，不含滚动条）5.window.outerWidth：窗口的整个实际宽度（包含你查看console.log时这样的控制台边栏）

JavaScript如何获取网页的宽高，以及如何兼容（各种坑详解）

weixin_44552302的博客

05-10

480

很多场景下会需要获取当前网页的宽高来达到一些效果，但是获取网页的宽高这里面还是有一点（hen duo）坑的，这里我进行了总结和详解，若有补充欢迎评论补充~ 方式一：window.innerWidth / window.innerHeight 这种方式只支持IE9以及以上版本的浏览器网页高度，打开F12控制台当然高度会不同方式二：document.documentElement.clientWidth console.log(document.documentElement); console.lo

HTML DOCUMENT窗口的尺寸和位置

Hhjian524的博客

01-14

1111

1、获取html 的可视化区域的宽度和高度(包含滚动条区域) 滚动条的宽度为17px window.innerWidth window.innerHeight 2、窗口显示区（可视区域）的宽度和高度，不包括滚动条区域 document.documentElement.clientWidth document.documentElement.clientHeight 3、<body&...

js的window对象--clientHeight、clientWidth、innerHeight、innerWidth