如何用JS动态获取浏览器的宽高

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;

PHP是无法获取屏幕的高度和宽度的，你可以用JS来获取

Javascript:

    网页可见区域宽： documentbodyclientWidth

网页可见区域高：

documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth

(包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽：

documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高：

documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上：

windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高：

windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度：

windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

JQuery:

$(document)ready(function(){

alert($(window)height()); //浏览器当前窗口可视区域高度

alert($(document)height()); //浏览器当前窗口文档的高度

alert($(documentbody)height());//浏览器当前窗口文档body的高度

alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window)width()); //浏览器当前窗口可视区域宽度

alert($(document)width());//浏览器当前窗口文档对象宽度

alert($(documentbody)width());//浏览器当前窗口文档body的宽度

alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

})

一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫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之间等等），不是精确值，所以可能得不偿失，因此我是不推荐的。

以上就是关于如何用JS动态获取浏览器的宽高全部的内容，包括:如何用JS动态获取浏览器的宽高、PHP怎么获取屏幕的宽度与高度、用javascript 怎样才能很好的获取手机的屏幕宽度和高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！