2020-08-06

JS-获取浏览器、屏幕以及元素的宽度和高度

window和document对象的区别

window对象

1、window对象是一个顶层对象，而不是某个对象的属性，它表示浏览器软件打开的窗口即浏览器的窗
2、window对象是可以省略的 如window.console.log(1) == console.log(1)

document对象

1、document对象是window对象的一个属性, 可以写成window.document.body == document.body
2、浏览器的HTML文档成为Document对象

区别

1、window 指窗口。document指页面。document是window的一个子对象
2、用户可以改变window.location (用其它文档取代当前文档)，但不能改变 document.location(因为这是当前显示文档的位置)。window.location本身也是一个对象,而document.location不是对象

浏览器屏幕宽高

• window.screen：包含用户电脑屏幕的信息 支持所有的浏览器
• window.screen.width / window.screen.height ：（只读属性）整个屏幕的宽或高，与窗口大小无关
• window.screen.availWidth / window.screen.availHeight：去掉windows下面资源管理器等固定性空间的宽高
• window.screenLeft / window.screenTop ：浏览器窗口距离电脑显示屏顶部/左侧的距离

浏览器宽高

• window.innerWidth / window.innerHeight：浏览器整个窗口的宽高减去console控制台栏、导航栏、菜单栏、地址栏(不包括资源管理器栏)之后剩余的宽高，随窗口大小变化而变化

• window.outerWidth / window.outerHeight ：浏览器整个窗口的宽高，包括导航栏、菜单栏、地址栏(不包括资源管理器栏)，随窗口大小变化而变化

• document.body.clientWidth / document.body.clientHeight：网页可见区域(body)的宽高，指body这个元素容器的宽高
  兼容：document.documentElement.clientWidth || document.body.clientWidth

• document.body.offsetWidth / document.body.offsetHeight：网页可见区域(body)，包括border、margin等的总宽高

• document.body.scrollWidth / document.body.scrollHeight：网页正文全文宽，包括有滚动条时的未见区域，注意当body元素里所有的元素的高度小于body元素高时，scrollHeight指body这个元素的高度；当body元素里所有的元素的高度大于body元素高时，scrollHeight指所有元素总高度

• document.body.scrollLeft / document.body.scrollTop：网页被卷去的Top/Left(滚动条)

事件对象坐标

• clientX和clientY：鼠标相对于浏览器(可视区域左上角0,0)窗口可视区域的X，Y坐标，可视区域不包括工具栏和滚动条。IE可用
• screenX和screenY：鼠标相对于设备屏幕左上角(0,0)的坐标
• offsetX和offsetY：鼠标相对于事件源左上角(0,0)的坐标
• pageX和pageY：鼠标相对于整个网页左上角(0,0)的坐标 (比如滚上去的区域也算在里面)。IE不支持

分辨率 比例 | 设备尺寸

1、以下是常见设备尺寸

1024*500 （8.9寸）
1024*768 （比例4：3  | 10.4寸、12.1寸、14.1寸、15寸; ）
1280*800（16：10  |15.4寸）
1280*1024(比例：5：4  | 14.1寸、15.0寸)
1280*854(比例：15：10 | 15.2）
1440*900 （16：10  17寸 仅苹果用）
1440*1050（比例：5：4  | 14.1寸、15.0寸）
1680*1050（16：10 | 15.4寸、20.0寸）
1920*1200 (23寸）

2、利用尺寸可用做PC端响应式媒体查询断点

@media (min-width: 1024px){
    body{...} /*>=1024的设备*/
} 
@media (min-width: 1100px) {
    body{...} /*>=1100的设备*/
} 
@media (min-width: 1280px) {
    body{...} /*>=1280的设备*/
} 
@media (min-width: 1440px) {
    body{...}
} 
@media (min-width: 1680px) {
    body{...}
} 
@media (min-width: 1920px) {
  body{...}
}