关于Screen.availWidth和Screen.availHeight

最新推荐文章于 2023-05-25 20:36:14 发布
最新推荐文章于 2023-05-25 20:36:14 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： js
本文详细解释了Screen.availWidth和Screen.availHeight属性在不同操作系统中的表现差异，特别是考虑到Windows任务栏对屏幕可用尺寸的影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于Screen.availWidth和Screen.availHeight获取高度的误区.Screen对象

Screen 对象包含有关客户端显示屏幕的信息。
availHeight    
返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth
返回显示屏幕的宽度 (除 Windows 任务栏之外)。
如果需要包括任务栏的就需要使用screen.height和screen.width咯!

availWidth 属性声明了显示浏览器的屏幕的可用宽度

例:screen.availHeight.
xp系统会减去windows任务栏默认30px高度.所以如果是800的高度会变成770;
win7的任务栏默认则是40px.所以是屏幕实际高度减去40;
另外任务栏也可以在屏幕上下左右任何位置的.所以availWidth也会去掉任务栏的距离

所以如果遇到获取的高度“不正确”时候,不用奇怪，如果遇到把任务栏拖到如下图这么大的时候,就会更小了.
一文理清JS中获取盒子宽高各方法的差异
九月镇灵将的博客
01-01 2011
这段时间在研究一个反爬产品，环境检测用到了很多个盒子宽高取值方法，如，各个方法取值结果不大相同，在此记录下遇到的方法。
width，availWidth，screenWidth,
kalinux的博客
09-12 1315
 $("#btn").offsetWidth                  返回元素自身宽度（不含border,padding)                    无px 单位  ; $("#btn").offsetLeft         对于利用position定位的，是它的left值         无px; $("#btn").style.width      返回元素自身宽度...
Screen width、height、availWidth、availHeight属性
小菜鸟的博客
11-12 1475
Screen width、height、availWidth、availHeight属性 screen.width 功能：声明了显示浏览器的屏幕的宽度，以像素计。 语法：screen.width screen.height 功能：声明了显示浏览器
window.screenLeft:window.screenX，window.innerWidth，screen.width，screen.availWidth
zgjxyszh的博客
03-13 987
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>window.innerWidth window.screenLeft:window.screenX </title> </head> <body&amp
关于Screen.availWidth和Screen.availHeight获取高度的误区.
weixin_34240657的博客
11-14 563
body{color:#303030;text-shadow:1px 1px 1px #d0d0d0;font: 400 12px "微软雅黑","宋体"} h1{color:#090909;} dl{border:1px #d7d7d7 solid;width:400px;padding:10px;background:-moz-linear-gradient(top,#f9f9f9,#...
Sub Window_OnLoad self.ResizeTo 320, 180 screenWidth = window.screen.availWidth screenHeight = window.screen.availHeight posLeft = (screenWidth - 320) / 2 posTop = (screenHeight - 180) / 2 self.MoveTo posLeft, posTop End Sub 这段代码什么意思
08-15
- `window.screen.availWidth`和`window.screen.availHeight`是浏览器提供的屏幕可用尺寸（去掉任务栏等区域后的尺寸）。 - 这段代码通常放在`<script type="text/vbscript">`标签内，在支持VBScript的浏览器（如旧...
Sub Window_OnLoad self.ResizeTo 400, 300 screenWidth = window.screen.availWidth screenHeight = window.screen.availHeight posLeft = (screenWidth - 320) / 2 posTop = (screenHeight - 180) / 2 self.MoveTo posLeft, posTop End Sub 那么这个窗口的大小如何根据分辨率 缩小率自适应呢
最新发布
08-15
因为`availWidth`和`availHeight`是屏幕的可用工作区域（排除任务栏），而`ResizeTo`设置的是窗口内容区域的大小，不包括边框和标题栏。因此，实际窗口占用的空间会更大，导致窗口比预期的要大，并且居中计算可能不...
function selimage() { window .open( "upload/preUpload.action", "", "toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,scrollbars=yes,width=400,height=240,top=" + (screen.availHeight - 240) / 2 + ",left=" + (screen.availWidth - 400) / 2 + ""); } function savefile() { window .open( "upload/preFiles.action", "", "toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,scrollbars=yes,width=400,height=240,top=" + (screen.availHeight - 240) / 2 + ",left=" + (screen.availWidth - 400) / 2 + ""); }解析本段代码
05-11
这段代码定义了两个JavaScript函数：selimage和savefile。这两个函数都使用window.open()方法打开一个新...其中，垂直居中的位置计算为(screen.availHeight-240)/2，水平居中的位置计算为(screen.availWidth-400)/2。
screen.html
11-15
alert('当前窗口的实际大小为：'+screen.height+":"+screen.width+'\n'+'当前窗口的可视大小为：'+screen.availHeight+":"+screen.availWidth); </body>
js得到屏幕宽高、页面宽高 (window.screen.availHeight)
晓风揽月
01-11 6081
js得到屏幕宽高、页面宽高 (window.screen.availHeight) window.screen.availWidth          返回当前屏幕宽度(空白空间)  window.screen.availHeight         返回当前屏幕高度(空白空间)  window.screen.width                  返回当前屏幕宽度
Vue，JS获取屏幕，浏览器高度宽度
qq_53461589的博客
05-25 3279
一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。通过Js的一些对象可以获取这些容器的高度、宽度。
window.screen.availWidth
weixin_58414196的博客
07-05 798
window.screen.availWidth
vue监听窗口全屏
weixin_44286765的博客
03-02 1591
mounted() { window.addEventListener("resize", this.a); this.a(); }, methods: { a(){ if (window.outerHeight === screen.availHeight){ if(window.outerWidth === screen.availWidth){ console.log("全屏1"); }else{.
vue项目浏览器全屏相关
超级小恐龙~
02-28 386
data() { return { fullHeight: document.documentElement.clientHeight, //页面高度 } } mounted() { let _this = this if (window.outerHeight === screen...
属性:availHeight availWidth height
管子（zero）的杂乱空间
12-09 1302
http://www.corange.cn/archives/2008/10/1878.html<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height =
width、clientWidth、offsetWidth、scrollWidth、availWidth
u012006632的博客
01-21 596
width 用于样式表；带单位 .style.width无法返回值offsetWidth 元素内容实际高度 数字 包括滚动条等边线 .offsetWidth = width+padding+border;clientWidth 元素内容可视区域的宽度 数字 不包括滚动条等边线 .offsetWidth = width+padding;srcollWidth chrome 元素正文全文
JavaScript中的Screen屏幕对象
zhigu8182的专栏
05-10 635
 creen 屏幕对象 反映了当前用户的屏幕设置。width 返回屏幕的宽度（像素数）。height 返回屏幕的高度。availWidth 返回屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。availHeight 返回屏幕的可用高度。colorDepth 返回当前颜色设置所用的位数 - 1：黑白；8：256色；16：增强色；24/32：真彩色
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值