浏览器窗口相关宽度和高度解析

最新推荐文章于 2021-12-07 11:12:43 发布
最新推荐文章于 2021-12-07 11:12:43 发布
阅读量123 收藏
点赞数
分类专栏： Util 文章标签： IE JavaScript Microsoft HTML 工作 ViewUI 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function test(){  
var    s  =  "";    
s  +=  "\r\n网页可见区域宽："+  document.body.clientWidth;    
s  +=  "\r\n网页可见区域高："+  document.body.clientHeight;    
s  +=  "\r\n网页可见区域高："+  document.body.offsetWidth  +"  (包括边线的宽)";    
s  +=  "\r\n网页可见区域高："+  document.body.offsetHeight  +"  (包括边线的宽)";    
s  +=  "\r\n网页正文全文宽："+  document.body.scrollWidth;    
s  +=  "\r\n网页正文全文高："+  document.body.scrollHeight;    
s  +=  "\r\n网页被卷去的高："+  document.body.scrollTop;    
s  +=  "\r\n网页被卷去的左："+  document.body.scrollLeft;    
s  +=  "\r\n网页正文部分上："+  window.screenTop;    
s  +=  "\r\n网页正文部分左："+  window.screenLeft;    
s  +=  "\r\n屏幕分辨率的高："+  window.screen.height;    
s  +=  "\r\n屏幕分辨率的宽："+  window.screen.width;    
s  +=  "\r\n屏幕可用工作区高度："+  window.screen.availHeight;    
s  +=  "\r\n屏幕可用工作区宽度："+  window.screen.availWidth;    
alert(s);    
}  
</script>
</head>
<body>
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<input type="button" name="test1" value="提交" οnclick="test()">  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdafdfdafdasfdafdafdafdadadfadfadfdafdfdafdasfdafdafdafdadadfadfadfdafdfdafdasfdafdafdafdadadfadfadfdafdfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<input type="button" name="test2" value="提交" οnclick="test()">  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
  
</body>
</html>
iteye_21250
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表示浏览器窗口的高度和宽度（不包括工具栏和滚动条）
weixin_45147894的博客
10-13 949
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title> </head> <body> <span id="...
根据浏览器窗口大小的自适应 单位
青菜陪白豆腐的博客
06-18 1万+
小白心得        今天在做页面的时候发现当我把浏览器窗口缩小的时候，里面的控件溢出我想要的边界了，然后我到之前在网上看到的所谓“自适应”这个词语，我查了一下这个“自适应布局”，它又叫做响应式布局，主要是针对页面在不同的设备不同的屏幕大小不同的分辨率下对页面布局的自动适应，其实在我的理解里就是传说中的等比例缩放，或许这也并不是绝对的，只是个人的理解而已。现在有很多前端开发框架都有响应式布局的功...
html移动端浏览器宽度默认980以及如何自适应
sunddy_x的博客
12-07 4524
前段时间一直开发vue项目，创建项目都是使用的脚手架，很多细节都没有太多关注，今天突然安排做一个简单的移动端页面，只是要求要用原生来实现，结果遇到了未曾想到的问题。如下图： 图上页面宽度固定是980px，而我选的移动端设备宽度明明是375px，而且不论选择其他哪种分辨率结果都一样，甚至我还换了不同浏览器做测试，结果自然都一样，因为根本不是浏览器的问题。 通过百度得知，safari 中 viewport 默认宽度为 980px。也就是说，如果你不指定 viewport 的宽度，那么就会默认按980处理。 回
获取浏览器窗口（window）的宽高
想好了再写！
03-18 1万+
以下三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 1.对于Internet Explorer、Chrome、Firefox、Opera 、 Safari： 浏览器窗口的内部高度: window.innerHeight 浏览器窗口的内部宽度: window.innerWidth 2.对于 Internet Explorer 8、7、6、5： 浏览器窗口的内部高度: document.documentElement.clientHeight 浏览器窗口的内部宽度: d
JSF获取页面路径和参数
yuzhi2217的专栏
12-18 323
      FacesContext facesContext = FacesContext.getCurrentInstance();             ExternalContext externalContext = facesContext.getExternalContext();             Map requestParameterMap = externalCont...
js获取浏览器高度和宽度值.pdf
09-27
- `window.innerWidth` 和 `window.innerHeight`: 这两个属性在现代浏览器中广泛支持，它们分别返回浏览器窗口的可视区域宽度和高度，包括垂直滚动条（如果存在的话）。 3. **滚动位置和全文尺寸** - `document....
JavaScript Window浏览器对象模型原理解析
10-15
4. `window.resizeTo()`: 调整当前窗口的大小至指定的宽度和高度。 了解和熟练使用`Window`对象及其方法是JavaScript开发中不可或缺的一部分，特别是在处理用户界面交互和动态网页效果时。通过掌握BOM，开发者可以...
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
11-23
在网页设计中，为了提供更好的用户体验，特别是在不同的设备和屏幕尺寸下，往往需要根据浏览器窗口的大小来调整页面元素的尺寸。本文将详细介绍如何使用JavaScript实现根据浏览器窗口大小实时动态改变网页文字的大小...
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
12-02
- `window.innerWidth` 和 `window.innerHeight` 分别用于获取浏览器窗口的可视区域宽度和高度，包括工具栏和滚动条。 - `document.body.clientWidth` 和 `document.body.clientHeight` 提供的是网页内容可见部分...
php获取访问者浏览页面的浏览器类型
10-20
总的来说，通过解析和分析User Agent字符串，开发者可以获取访问者的浏览器信息，从而为不同浏览器提供特定的适配和支持。然而，为了获得更稳定的结果，通常建议结合其他技术，如浏览器特性检测，以确保兼容性和用户...
浏览器窗口的高度和宽度
weixin_34358092的博客
02-08 99
　　浏览器窗口的高度和宽度: 　var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth; //获取页面宽度 　　var h=window.innerHeight|| document.documentElement.clientHeight|| documen...
js中关于网页视图的宽高介绍
weixin_45107630的博客
09-08 538
我们在写一些网页小项目时，总会遇到一些需要获取各种视图的宽高，下面就简单搜集了一些关于视图窗口的一些获取方法： 如下所示 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度...
1024和800分辨率下浏览器宽度和宽度的设定研究[转]
weixin_34008784的博客
04-06 395
1024分辨率下： IE： IE7：1003*590 IE6：1003*596 IE5.5:1003*607 Maxthon(正常模式):1003*544 浏览窗口的高度跟IE上边的工具栏有关系，以上的高度都是在IE的默认状态下的。Mathon有IE模式、正常模式、简单模式三个模式，我只测试了正常模式下的。 FireFox： FireFox的浏览窗口的高度和宽度是这样计算的：当页面...
有关浏览器窗口宽度高度几个值的解析
iteye_9473的博客
06-18 100
1 元素的 offsetWidth 包括border padding content 整体的宽度。 clientWidth 只包括内容区 padding 不包括border。 clientLeft = offsetWidth -clientWidth 即这个元素border的值 offsetLeft 若无已定位的包裹元素，则它相对于html元素定位。（跟其他元素比如body有无m...
防止浏览器窗口太小，设置最小宽度
热门推荐
艾小逗
09-17 2万+
页面设置宽高百分比的时候，防止浏览器窗口改变太小，页面内容发生改变 给页面设置最小宽度和最小高度 .contain{ width : 100%; min-width: 810px; height: 100%; min-height: 600px; } www.foryh.com...
《AI大模型应用》--由 OpenAI 開發的語音辨識人工智慧模型.zip
07-19
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
精英stm32f103开发板_UCOSIII互斥信号量.zip.zip
最新发布
07-19
精英stm32f103开发板_UCOSIII互斥信号量.zip.zip
去掉标签后的test.words
07-19
test.words
JavaScript教程：窗口对象与对话框方法解析
它接受多个参数，如要加载的URL、新窗口的名称以及窗口特性（如宽度、高度等）。例如： ```javascript window.open('http://example.com', 'newWindow', 'width=400,height=600'); ``` 2. **显示信息对话框** -...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值