window innerWidth innerHeight outerWidth outerHeight

最新推荐文章于 2024-02-22 17:35:02 发布
最新推荐文章于 2024-02-22 17:35:02 发布
阅读量552 收藏 1
点赞数 1
文章标签： javascript chrome devtools 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42123190/article/details/103950327
版权

window innerWidth innerHeight outerWidth outerHeight

本次测试

笔记本分辨率1366*768，chrome，严格模式use strict，下文数值单位px

任何情况下

任何情况下innerHeight和innerWidth，得到的是可视区域大小的实际像素值（前提必须是页面100%显示。页面放大，实际得到的像素值会变小，页面放小，实际得到的像素值会变大）。页面缩放不影响outerWidth和outerHeight的取值。

outerWidth和outerHeight的特殊之处（没搞懂为什么）

1.outerWidth与innerWidth

  • 当浏览器窗口最大化时（非全屏），outerWidth=innerWidth=1366
  • 当浏览器窗口非最大化时（非全屏），outerWidth-innerWidth=16
  • 当浏览器窗口全屏时（F11键），outerWidth-innerWidth=负16

2.outerHeight与innerHeight

  • 当浏览器窗口最大化时（非全屏），outerHeight（728，去掉了笔记本底部的任务栏高度）-innerHeight（657）=71
  • 当浏览器窗口非最大化时（非全屏），outerHeight-innerHeight=88
  • 当浏览器窗口全屏时（F11键），outerHeight-innerHeight=负16
qq_42123190
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于window.innerHeight/innerWidth，document.documentElement.clientWidth/Height，document.body.clientWidt...
weixin_30516243的博客
12-04 801
一、window.innerWidth/Height => 获取浏览器可视区域宽/高度 ========①宽度：经测试，该属性获取的是包含滚动条宽度的（有的博客乃至菜鸟教程都认为他不包含）浏览器可视区域宽度②高度：但是高度却不包含工具栏高度，只是可视区域高度②IE 8 及更早 IE版本不支持这两个属性。=================== 二、document.documentEl...
innerWidth outerWidth
weixin_34307464的博客
04-12 242
在jQuery中: 一、width()方法用于获得元素宽度； 二、innerWidth()方法用于获得包括内边界（padding）的元素宽度; 三、outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和...
innerWidth 和 outerWidth 区别？
m0_74892004的博客
01-25 347
总结：documentElement.clientWidth 和 innerWidth 类似；outerWidth是整个浏览器。
window.innerWidth以及window.outerWidth的区别
sinat_32067081的博客
11-06 7471
window.outerWidth获取浏览器窗口外部的宽度。 它表示整个浏览器窗口的宽度，包括边栏 window.innerWidth获取浏览器可视区域的宽度，也就是页面的宽度<!DOCTYPE html> <html> <body><p id="demo"></p><script> var w = window.innerWidth || document.documentElement.cli
innerWidth( )、outerWidth()、outerWidth(true)尺寸大小
m0_51040189的博客
05-01 638
1）以上参数为空，则是获取相应值，返回的是数字型。 2）如果参数为数字，则是修改相应值。 3）参数可以不必写单位（写单位加""） <style> div { width: 200px; height: 200px; background-color: red; padding: 10px; border: 15px solid green; ...
width、innerWidth、outerWidth（1）
步步错的博客
04-30 592
在jQuery中，width其实指的就是content-width innerWidth = width+padding; outerWidth = innerWidth+innerWidth;
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
12-09
代码如下:<!DOCTYPE html PUBLIC “-//W3C... <head> <title>jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用</title> <s
解析window.open的使用方法总结
09-05
- `outerHeight`：整个窗口（包括边框）的高度。 - `outerWidth`：整个窗口（包括边框）的宽度。 - `resizable`：窗口是否可以调整大小。 - `screenX`：窗口距离屏幕左侧的像素距离。 - `screenY`：窗口距离...
jQuery height()、innerHeight()、outerHeight()函数的区别详解
01-19
与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。 在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。 下面我们以元素...
js_Window对象及方法
12-30
* width：以像素为单位指定窗口的宽度，已被 innerWidth 取代。 * height：以像素为单位指定窗口的高度，已被 innerHeight 取代。 * outerWidth：以像素为单位指定窗口的外部宽度。 * outerHeight：以像素为单位指定...
详解clientWidth，scrollWidth，offsetWidth，innerWidth，outerWidth
qq_47443027的博客
11-25 3322
3.document.documentElement.offsetWidth：元素的内容宽度（不只是你能看到的部分，含滚动条/包含border）2.document.documentElement.scrollWidth：内容可滚动宽度（不只是你能看到的部分，不含滚动条）1.document.documentElement.clientWidth：可视区屏幕宽度（你能看到的页面部分，不含滚动条）5.window.outerWidth：窗口的整个实际宽度（包含你查看console.log时这样的控制台边栏）
彻底理解 innerWidth、outerWidth、screen.width、vw 和 getBoundingClientRect的区别
聪明的竹子的博客
10-08 3265
起因 说实话，撸了接近三年的前端。每次要用到innerWidth、outerWidth、screen.width 、vw、clientWidth和 getBoundingClientRect，都很可耻地点击谷歌浏览器，然后…你懂的。才能知道我应该用那个。在此之前，我草草写了一篇极短的文章，天真地以为自己理解了，谁知不然，每次都是很熟练地…,哦不。 贴上图片，引以为戒: 说实话，至今没看懂这张图片，并且不知道为什么当初会吧这张图片放上去。手动狗头 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
jQuery中width()、innerWidth()、outerWidth()的区别
xiaobing_hope的专栏
12-18 2784
jQuery中width()、innerWidth()、outerWidth()的区别 outerWidth() outerWidth()函数用于获取当前匹配元素的外宽度 外宽度默认包括元素的padding、border但是不包括margin部分的宽度   innerWidth() innerWidth()函数用于设置或返回当前匹配元素的内宽度 内宽度包括元素的padding，但
获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
weixin_34211761的博客
08-19 432
基本介绍 $(window).width()与$(window).height() $(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。 $(window).width() = width + padding $(window).height() = height +...
iOS iPadOS safari 独立Web应用屏幕旋转的时候 onresize window.innerHeight 数值不对。
学习笔记
07-02 1359
我有一个日记应用，是可以作为独立 Web 应用运行的那种，但在旋转屏幕的时候获取到的和就不对了，不是屏幕的正常尺寸。导致内容显示不正常。iPhone和 iPad 上都是这样的。本来应该是这样的。在旋转一次再转回来的时候就成了这样。
css_你设置的像素为整数，浏览器显示盒子的实际像素和不一致或有小数问题
first_hands的博客
03-01 602
一无所获，然后我就瞬间想到了W10系统自己的缩放；然后我在设置---显示中看到了缩放与布局，果然自己的缩放比是125%，这个是系统推荐的，所以我想大家要是用的和我同版W10就会遇到这个问题。的时候，可能会遇到这样的问题：你设置的像素为整数，浏览器显示盒子的实际像素和不一致或有小数问题；这个时候我们经过查询发现是浏览器的缩放问题，然后我发现自己的缩放就是100%，没有问题呀。缩放比设置为100%之后你就会奇迹的发现设置和显示是一致的。自己设置额边框为5px，可是浏览器显示为4.800px。
31【window 对象】
DSelegent的博客
08-26 286
31【window 对象】
c语言中width获取窗体宽度,获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别...
weixin_36488777的博客
05-27 1168
基本介绍$(window).width()与$(window).height()$(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。$(window).width() = width + padding$(window).height() = height + paddingdocument.documentElement.c...
BOM屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
ynd_sg的博客
03-31 647
基本介绍 $(window).width()与$(window).height() $(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。 $(window).width() = width + padding $(window).height() = height + padding document.documen...
Window.innerHeight、Window.outerHeight
最新发布
galaxyJING的博客
02-22 443
Window.innerHeight 接口的只读innerHeight属性 Window返回窗口的内部高度（以像素为单位），包括水平滚动条的高度（如果存在）。值innerHeight取自窗口 布局视口的高度。可以使用该 innerWidth属性获得宽度。一个整数值，指示窗口的布局视口高度（以像素为单位）。该属性是只读的，没有默认值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值