浏览器中常见尺寸的差异

与窗口相关的尺寸有视口宽度clientWidth、浏览器外宽outterWidth、浏览器内宽innerHeight，视口高度clientHeight、浏览器外高outterHeight、浏览器内高innerHeight， 这几个尺寸会因浏览器的不同略有差异。

上述三项测试在Chrome、IE11、Edge、Firefox、Safari 中测试通过。

clientWidth、outterWidth、innerHeight 的值均一致，safari 的 outterWidth 和 outerHeight 均为0。而且 clientWidth、outterWidth、innerHeight 三个值均会随着浏览器地址栏和工具栏的显示或隐藏而发生变化，也就是说浏览器大小、视口是一起发生变化的。

offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（含padding）、（可见的）水平滚动条高度、 上边框高度和下边框高度。这个高度可以用来检测元素的可见区域。

offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（含padding）、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。这个高度可以用来检测元素的可见区域。

offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。

clientWidth: 指的是元素内容及其内边距所占据的空间大小，不包含border，滚动条空间不计算在内。

注意：滚动条一般是位于border的内边缘，盖住了padding，但是不占用padding的空间。

scrollHeight: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总高度。

scrollWidth: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总宽度。

scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop: 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

带有垂直滚动条的页面总高度：documentdocumentElementscrollHeight，如果想要获取文档高度，需要找到 scrollHeight 和 clientHeight 中的最大值。

参考文献：

《高级语言程序设计 第三版》

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

})

JQuery获取：

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

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

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

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

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

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

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

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

JS获取：

窗口可视区域宽度 ： documentdocumentElementclientWidth || documentbodyclientWidth;

窗口可视区域高度 ： documentdocumentElementclientHeight || documentbodyclientHeight;

窗口可视区域宽度+边线和滚动条 ： documentbodyoffsetWidth ;

窗口可视区域高度+边线和滚动条 ： documentbodyoffsetHeight ;

实际内容的宽度 ： documentbodyscrollWidth;

实际内容的高度 ： documentbodyscrollHeight;

滚动条下拉被卷起来的距离 ：documentdocumentElementscrollTop || windowpageYOffset || documentbodyscrollTop;

滚动条侧拉被卷起来的距离 ：documentbodyscrollLeft || documentdocumentElementscrollLeft ;

网页正文部分上 ：windowscreenTop;

网页正文部分左 ：windowscreenLeft;

元素的宽度 ：objoffsetWidth;

元素的高度 ：objoffsetHeight;

相对于父元素的上位移 ：objoffsetTop;（在元素的包含元素不含滚动条的情况下）

相对于父元素的左位移 ：objoffsetLeft;（在元素的包含元素不含滚动条的情况下）

word2010第2，3，4，5，6行平均分布高度，是指WORD表格的平均分布，选中相关表格，通过表格工具即可实现。

方法步骤如下：

1、打开需要 *** 作的WORD文档，选中表格相关单元格行，然后点击表格工具的“布局”标签页。

2、在单元格大小选项上方，点击“分布行”即可。

3、返回主文档，发现在word2010第2，3，4，5，6行平均分布高度 *** 作完成。

以上就是关于浏览器中常见尺寸的差异全部的内容，包括:浏览器中常见尺寸的差异、PHP怎么获取屏幕的宽度与高度、JS 获取当前浏览器宽高等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！