浏览器根对象window之值为数值的属性

时间:2021-08-29 13:23:14

1. number属性

1.1 length

length 属性返回在当前窗口中frames的数量(包括IFRAMES)。

该属性值与window.frames.length属性值相等。

1.2 innerWidth/Height

窗口中文档显示区域的宽度,该属性可读可写,以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

IE8之前不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。

1.3 outerWidth/Height

表示窗口的宽度包括两边的border及滚动条的值, outerHeight 表示窗口的高度包括菜单,地址栏,工具栏等,属性可读性。

IE8之前的浏览器不支持,且没有提供替代的属性。

1.4 滚动值

scrollY:firefox、chrome,opera支持,IE不支持,忽略Doctype规则。

pageYOffset:IE9+ 、firefox、chrome,opera均支持该方式获取页面滚动高度值,并且会忽略Doctype定义规则。

延伸记忆:

document.documentElement.scrollTop:如果页面定义了doctype文档头,基本所有的浏览器都支持。除safari貌似不支持,定义html5 doctype,支持body.scrollTop却不支持documentElement.scrollTop。

document.body.scrollTop:如果没定义doctype,所有浏览器都支持,(定义了doctype,chrome 也支持)

1.5 screenX/Y

表示窗口相对于屏幕左上角的位置。注意IE不支持此属性。只读属性。

screenTop/screenLeft属性值相同。

1.6 devicePixelRatio

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips。比如电脑时值为1,iPhoneX值为3。

dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

浏览器一般都会有放大缩小的控件,当你选择不同的缩放比例时,window.devicePixelRatio都会相应的改变。比如将页面放大2倍,那么window.devicePixelRatio=2。

这个值大多用在移动设备上,正常人眼可以识别的分辨率为300PPI,而现在很多设备的分辨率都超过了300PPI。如果设备总是以满分辨率来显示东西就可能造成文字太小,人们看不清。因此像浏览器这样的软件就会对内容做一次放大后再进行渲染,也就是降低分辨率。要降低分辨率就需要让像素这个单位变大,因此PPI的计算不再使用物理像素,而改用设备独立像素。那么设备独立像素和物理像素之间就存在一个比例差异,这就是设备像素比。

1.7 TEMPORARY

该属性通常与PERSISTENT一起使用。由于此时仅GoogleChrome 浏览器可以实施此FileSystemAPI,目前尚不存在专门用于文件/配额管理的浏览器用户界面,故在此不再深入研究。