最近在做一个类似windows鼠标右键弹出菜单的东西,用到了浏览器相关的宽度和高度的东西,于是系统的看了下。心里有了大致了解,但还是有些小问题。

我的电脑,14寸,分辨率1366*768。测试浏览器ie9,chrome,firefox。

网页可见区域宽:document.body.clientWidth

网页可见区域高:document.body.clientHeight

宽度随着浏览器窗口的调整而变化,是我们可见的窗口区域宽度。最大1347,最小三种浏览器各不相同。

高度随着浏览器窗口的调整固定不变,是窗口区域所有文档的高度。chrome和firefox大小相同,ie9比之高了24px。

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的宽)

offsetWdith和offsetHeight比上边的多了边线的宽度,别的一模一样。

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

对于ie9和chrome,宽度是窗口区域所有文档的宽度,和窗口大小无关。而firefox,宽度随着窗口的改变而改变,最大等于clentWidth。

高度随着浏览器窗口的调整固定不变,是窗口区域所有文档的高度。chrome比firefox高2px,ie9比chrome高了22px。

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

对chrome来说是网页被卷上去的高度,即滚动条下拉时上去的网页部分。ie9和firefox一直为0。

宽度同高度类似,只有chrome有值。

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

对于ie9来说是网页正文部分上边的高度,即菜单栏工具栏等,55px。chrome为0,firefox是undefined.

对ie9和chrome来说,宽度都是0。firefox是undefined。

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

三个浏览器一样,都是1366*768.

屏幕可用工作区高度:window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth

三个浏览器都一样,高度728px,宽度1366px。768-728=40px,说明状态栏的高度为40px。

总结完毕。

问题1:在firefox中如何获得类似chrome和ie9中scrollWidth的值?因为firefox中scrollWidth至多等于clientWidth的值。

问题2:如何获得浏览器工具栏以下状态栏以上部分的高度,因为不同浏览器高度不同,我也总不能手工测量下吧?还有就是调整窗口大小后如何得到此时窗口的实际宽度?

哪位如果有解决方法,希望说下,先谢了

chrome 窗体高度_浏览器几种高度宽度相关推荐

  1. 微信小程序获取滚动条高度_小程序超过高度加滚动条 小程序尺寸规范

    DW里如何设置自适应屏幕高度,且内容超出时出现滚动条? 首先:打开DW并创建一个新的HTML页面.第二:为它的页面写一个div,类pingmu.第三,保存这个文件.第四:创建一个新的类样式,并为其Di ...

  2. el-popover可以设高度_家用餐厅吧台桌高度一般多少?吧台设计需要注意哪些?...

    在进行装修中生活吧台的设计以及逐渐渗透到各个家庭中,但是要想做到合理的设计,一些细节方面的考量必不可少,那么餐厅吧台桌高度一般是多少呢?下面就跟随深圳装修网一起来了解一下吧! 吧台桌的高度是多少 1. ...

  3. jq动态渲染后获取不到元素高度_浏览器的渲染机制

    面试肯定会问到这个吧~ So:再一次的屡屡浏览器的渲染机制~ 在渲染一开始会先从网络层获取请求文档(HTML.XML)的内容,然后再进行以下基本流程 3.1 解析HTML => DOM树 从HT ...

  4. 数据结构树高度_树数据结构的高度

    数据结构树高度 In this tutorial, we'll be discussing Binary Trees. We'll see how to calculate the height of ...

  5. h5如何动态获取键盘高度_动态获取键盘高度

    //在遇到有输入的情况下.由于现在键盘的高度是动态变化的.中文输入与英文输入时高度不同.所以输入框的位置也要做出相应的变化 #pragma mark - keyboardHight -(void)vi ...

  6. html图片自适应浏览器高度,css如何高度自适应浏览器高度?

    高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容. 在IE7+及chrome.firefox等浏览器中, ...

  7. jq获取页面高度_通过 jQuery 获取浏览器窗口高度问题

    我曾经在使用jQuery一些东西的时候碰到了这样一些奇怪的问题.例如,我尝试着用 jQuery 的 $(window).height() 来获取浏览器窗口高度,就遇到了问题. 理论上,$(window ...

  8. 适应各个浏览器的iframe高度自动调整

    来源:http://www.mzone.cc/article/457.html Post by 铁木箱子 in Web技术, 技术杂谈 on 2010-10-16 9:09. 点评一下评论 (2)阅读 ...

  9. 解决高度塌陷的几种方法

    引入 进行页面布局时,为了能够达到自适应,通常高度是不会进行固定设置的,而使用float进行元素的浮动后,由于没有内容的高度,所以会发生父元素的高度塌陷问题,为了解决此类问题这里给出了几种解决方法. ...

最新文章

  1. java的工作原理你知道吗_每天用Mybatis,但是Mybatis的工作原理你真的知道吗?
  2. 网络安全从事工作分类_那么,您想从事安全工作吗?
  3. asp.net中的记忆盲区
  4. 区块链太太太太太难了,我花了一分钟才搞懂!
  5. ubuntu 20上安装gdbgui
  6. AppleWatch开发-AlertController
  7. 输出字母沙漏+对称字符串
  8. 广二师的计算机专业好不,广东技术师范学院和广东第二师范学院哪一个更好?...
  9. 定义空列表元素类型_【Python+Excel】做数据分析5--列表和元组读取和常用查询
  10. xib中的label加边框
  11. 发条js调试工具_【转载】移动端js调试工具:eruda
  12. vs code html插件_VS插件CodeRush全新发布v20.1.7|支持HTML
  13. 探索性测试在哪里适合?
  14. 苹果装系统提示未能与恢复服务器,恢复系统未能与服务器取得联系 | 手游网游页游攻略大全...
  15. 学生Dreamweaver静态网页设计 基于HTML+CSS+JavaScript制作简食餐厅美食网站制作
  16. Ubuntu将文件夹切换为英文
  17. 英特尔再遭反垄断围剿 或面临38亿美元罚款
  18. UVa 10387 - Billiard
  19. 【Python】计算文件的MD5、SHA1、SHA256值(校验文件完整性)
  20. linux fping命令使用

热门文章

  1. sqlserver根据特殊符号截取数据
  2. 软件支持 | 更新最新版本的Adobe cc 2018.1
  3. CNNs and Deep Q Learning
  4. Springboot内置Tomcat配置参数调优
  5. Tomcat配置https(jks证书请求)
  6. C++string转int的方法
  7. 封开国家地质公园的北回归线标志塔
  8. vitis qspi_flash的烧写
  9. 第十一章 国民收入的决定:IS-LM模型
  10. error: reference to ‘XXX’ is ambiguous