zoukankan      html  css  js  c++  java
  • 浏览器几种高度宽度

    转载(http://www.cnblogs.com/heaventear/archive/2013/04/05/3000364.html)

    其他:http://www.cnblogs.com/EricaMIN1987_IT/p/3593431.html

    最近在做一个类似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:如何获得浏览器工具栏以下状态栏以上部分的高度,因为不同浏览器高度不同,我也总不能手工测量下吧?还有就是调整窗口大小后如何得到此时窗口的实际宽度?

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

  • 相关阅读:
    js面试相关
    邮件(一):Springboot+thymeleaf的发邮件部分
    饿了么组件--table组件自定义渲染列,同时伴有v-for和v-if情况
    java开发规范学习
    java发送邮件
    vue垂死挣扎--遇到的问题
    vue学习记录
    matlab---设置背景颜色为白色
    Git push时不需要总输入密码
    我不知道的js(一)作用域与闭包
  • 原文地址:https://www.cnblogs.com/ooip/p/6837904.html
Copyright © 2011-2022 走看看