JavaScript中有关高度和宽度的API介绍

JavaScript世界中，有很多看起来能够帮我们知道网页宽度和高度的API，但太繁多了，而且容易弄混、不容易区分它们。下面我就来介绍一下，这些API到底是什么意思，之间的区别又在哪里。

一、设备的分辨率

window.screen.width × window.screen.height

台式机：1440 × 900 / 手机：360 × 640

二、浏览器的分辨率

window.screen.availWidth × window.screen.availHeight

台式机Chrome：1440 × 860 / 手机：360 × 640

设备和在设备上安装的浏览器只要不更改，它们的分辨率保持不变

在台式机设备中，浏览器分辨率的高度 = 设备分辨率的高度 - 40px；设备分辨率的宽度包含了滚动条宽度

三、窗口视口（能看到的网页区域）的宽高

window.innerWidth × window.innerHeight

台式机Chrome：1440 × 797 / 手机：360 × 518

window.innerWidth在台式机设备中，包含滚动条宽度；window.innerHeight会随菜单和书签栏的隐藏、显示发生改变

IE8不支持这两个属性

可以把这两个属性作为响应式布局的依据

四、文档文件的宽高

（完）

 

时间： 2024-12-15 14:56:32

JavaScript中有关高度和宽度的API介绍的相关文章

javascript中各类高度和宽度的整理

基础学的不扎实,关于高度宽度的各个属性总是糊里糊涂的,在这里理一下思路. 下面的测试以以下html结构为例 <div id="div1" style="height:200px;width:200px;padding:20px;margin:10px;border:1px solid #000;overflow:scroll"> <div id="div2" style="height:1000px;width:100

javascript中各个高度与宽度区分

js获取文档的高度:Math.max(document.body.scrollHeight,document.documenElement.scrollHeight); js获取浏览器可视区域的高度: Math.max(document.body.clientHeight, document.documentElement.clientHeight) // window.innerHeight; js获取滚动条高度:document.documentElement.scrollTop || do

CSS中的高度和宽度

1.简单的说,常规流向的块级元素,width为auto时,会尽量充满父元素的内容宽度,而height为auto时,则是由其内部的不浮动的子元素的高度决定(无浮动,绝对定位). 2.width:100%;width:auto <div>    <p>1</p></div><style type="text/css">div{ width:600px; overflow:auto;}p{ width:100%;      padd

JavaScript获取网页高度和宽度

JavaScript获取网页高度宽度 /********************  * 取窗口滚动条高度  ******************/ function getScrollTop() {     var scrollTop=0;     if(document.documentElement&&document.documentElement.scrollTop)     {         scrollTop=document.documentElement.scrollTo

JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中:  document.body.clientWidth ==> BODY对象宽度 document.

javascript获取浏览器高度与宽度信息

网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:document.body.scrollTop

设置TableViewer 中的高度和宽度

//此处的Table就是读者所使用的table //此处本人所使用的table  是通过 tableViewer.getTable();来的 读者可自行做转换 Table.addListener(SWT.MeasureItem, new Listener() { @Override public void handleEvent(Event event) { // TODO 自动生成的方法存根 // 设置宽度 event.width = soluTable.getGridLineWidth();

javascript中关于日期和时间的基础知识

× 目录 [1]标准时间 [2]字符串 [3]闰年[4]月日[5]星期[6]时分秒 前面的话 在介绍Date对象之前,首先要先了解关于日期和时间的一些知识.比如,闰年.UTC等等.深入了解这些,有助于更好地理解javascript中的Date对象.本文将介绍javascript关于日期和时间的基础知识 标准时间 一般而言的标准时间是指GMT和UTC,以前是GMT,现在是UTC GMT 格林尼治标准时间(GMT)是指位于伦敦郊区的皇家格林尼治天文台的标准时间,因为本初子午线被定义在通过那里的经线

JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位

浏览器的宽高示意图: JavaScript中常用的方法: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scr