js获取浏览器可见区域(不包括标题栏、地址栏、收藏夹栏状态栏等额外区域，仅为页面呈现区域)的高度和宽度
宽度:documentdocumentElementclientWidth
高度:documentdocumentElementclientHeight
文档类型:XHTML10
浏览器:ALL
要在js中获得浏览器的高度可以参考以下步骤(具体代码见最后）：
1、outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
2、outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。
3、innerheight 返回窗口的文档显示区的高度。
4、innerwidth 返回窗口的文档显示区的宽度。
补充：
在浏览器兼容方面：
1、所有主流浏览器都支持 outerWidth 和 outerHeight 属性。
注意：IE 8 及更早 IE 版本不支持该属性。
2、所有主流浏览器都支持 innerWidth 和 innerHeight 属性。
注意：IE 8 及更早 IE版本不支持这两个属性。
获取代码：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
<head>
<title>请调整浏览器窗口</title> <meta >
一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内（说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的）。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用windowinnerHeight还是windowscreenwidth拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=5就可以让viewport和屏幕一致的尺寸，但这个比例在不同的手机上并不一定是2倍关系，特别是Android手机，在大屏手机（5寸以上）上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。
有一个非常曲线的解决办法，就是：css的媒体查询（@media）是能够检测屏幕尺寸（其实是浏览器窗体的真实尺寸，并不是屏幕的真实物理尺寸，介意的朋友就不要看了）的，通过它来给网页内的某个元素设置一个特殊的属性，然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值（比如480px到540px之间、540px到600px之间等等），不是精确值，所以可能得不偿失，因此我是不推荐的。
你可以用documentbodyscrollWidth 来获取，但兼容性本人没有做过测试。 给你个参考：网页可见区域宽：documentbodyclientWidth
网页可见区域高：documentbodyclientHeight
网页可见区域宽：documentbodyoffsetWidth(包括边线的宽)
网页可见区域高：documentbodyoffsetHeight(包括边线的宽)
网页正文全文宽：documentbodyscrollWidth
网页正文全文高：documentbodyscrollHeight
网页被卷去的高：documentbodyscrollTop(IE7无效)
网页被卷去的左：documentbodyscrollLeft(IE7无效)网页被卷去的高：documentdocumentElementscrollTop(IE7有效)网页被卷去的左：documentdocumentElementscrollLeft(IE7有效)
网页正文部分上：windowscreenTop
网页正文部分左：windowscreenLeft
屏幕分辨率的高：windowscreenheight
屏幕分辨率的宽：windowscreenwidth
屏幕可用工作区高度：windowscreenavailHeight
屏幕可用工作区宽度：windowscreenavailWidth 相对于窗口左上角的X：windoweventclientX相对于窗口左上角的Y：windoweventclientY
相对于整个页面的X：windoweventX
相对于整个页面的Y：windoweventY
获取代码如下：
<script>
var w=documentdocumentElementdocumentdocumentElementclientHeight:documentbodyclientHeight;
alert(w);
</script>
获取浏览器的高度：jquery代码直接使用 $(window)height()。
获取浏览器的宽度：
jquery代码直接使用 $(window)With();
原生态JS代码：
var w=documentdocumentElementdocumentdocumentElementclientWidth:documentbodyclientWidth。
用clientHeight或offsetHeight。
对于没有具体设置高度的元素，不能直接用height获取高度。
clientHeight表示内容可见区域高度；offsetHeight不同浏览器数值不尽相同，除了clientHeight的高度外还包括边框等的高度。
IE中：
documentbodyclientWidth ==> BODY对象宽度
documentbodyclientHeight ==> BODY对象高度
documentdocumentElementclientWidth ==> 可见区域宽度
documentdocumentElementclientHeight ==> 可见区域高度
FireFox中：
documentbodyclientWidth ==> BODY对象宽度
documentbodyclientHeight ==> BODY对象高度
documentdocumentElementclientWidth ==> 可见区域宽度
documentdocumentElementclientHeight ==> 可见区域高度
Opera中：
documentbodyclientWidth ==> 可见区域宽度
documentbodyclientHeight ==> 可见区域高度
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
没有定义W3C的标准，则
IE为：
documentdocumentElementclientWidth ==> 0
documentdocumentElementclientHeight ==> 0
FireFox为：
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
示例：
var winWidth = 0;var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (windowinnerWidth)
winWidth = windowinnerWidth;
else if ((documentbody) && (documentbodyclientWidth))
winWidth = documentbodyclientWidth;
//获取窗口高度
if (windowinnerHeight)
winHeight = windowinnerHeight;
else if ((documentbody) && (documentbodyclientHeight))
winHeight = documentbodyclientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth)
{
winHeight = documentdocumentElementclientHeight;
winWidth = documentdocumentElementclientWidth;
}
//结果输出至两个文本框
documentform1availHeightvalue= winHeight;
documentform1availWidthvalue= winWidth;
}
findDimensions();
//调用函数，获取数值
windowonresize=findDimensions;
在js使用过程中可能会根据要求获取浏览器高度和宽度。
一、获取浏览器的高度：
jquery代码直接使用 $(window)height();
原生态JS代码需要考虑页面DOCTYPE的声明，使用以下代码：
<script>
var w=documentdocumentElementdocumentdocumentElementclientHeight:documentbodyclientHeight;
alert(w);
</script>
二、获取浏览器的宽度：
jquery代码直接使用 $(window)With();
原生态JS代码：
var w=documentdocumentElementdocumentdocumentElementclientWidth:documentbodyclientWidth;
以上就是关于JS如何获取浏览器的高度全部的内容，包括:JS如何获取浏览器的高度、js 如何获得浏览器的高度、用javascript 怎样才能很好的获取手机的屏幕宽度和高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）