window对象

window对象

窗口位置

移动窗口：moveTo()、moveBy()可能会被浏览器禁用

moveTo()接收要移动到的新位置的绝对坐标x 和y

moveBy()则接收相对当前位置在两个方向上移动的像素数

像素比

CSS 像素：CSS 像素背后其实是一个角度：0.0213°。屏幕距离人眼是一臂长，则以这个角度计算的CSS 像素大小约为1/96 英寸。这样定义像素大小是为了在不同设备上统一标准。低分辨率上文字应该与高分辨率上文字是同样大小。

缩放系数：不同像素密度的屏幕下就会有不同的缩放系数，以便把物理像素（屏幕实际的分辨率）转换为CSS 像素（浏览器报告的虚拟分辨率）。举个例子，手机屏幕的物理分辨率可能是1920×1080，但因为其像素可能非常小，所以浏览器就需要将其分辨率降为较低的逻辑分辨率，比如640×320。

window.devicePixelRatio ：物理像素与CSS 像素之间的转换比率由==window.devicePixelRatio 属性提供。对于分辨率从1920×1080 转换为640×320 的设备==window.devicePixelRatio 的值就是3。这样一来，12 像素（CSS 像素）的文字实际上就会用36 像素的物理像素来显示。window.devicePixelRatio 实际上与每英寸像素数（DPI，dots per inch）是对应的。DPI 表示单位像素密度，而window.devicePixelRatio 表示物理像素与逻辑像素之间的缩放系数。

调整窗口大小

resizeTo()和resizeBy() 可能会被浏览器禁用

resizeTo()接收新的宽度和高度值

resizeBy()接收宽度和高度各要缩放多少

window.resizeTo(100, 100);// 缩放到100×100
window.resizeBy(100, 50);// 缩放100×150
window.resizeTo(300, 300);// 缩放到300×300

视口位置

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文档。度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset、window.scrollX 和window.pageYoffset、window.scrollY。

返回当前窗口左上角距离文档左上角位置即页面滚动条位置

window.pageXoffset、window.scrollX

window.pageYoffset、window.scrollY。

可以使用scroll()、scrollTo()和scrollBy()方法滚动页面。这3 个方法都接收表示相对视口距离的x 和y 坐标。

scroll()、scrollTo()：两个参数表示要滚动到的坐标，

scrollBy()：中表示相对当前滚动的距离。

// 相对于当前视口向下滚动100 像素
window.scrollBy(0, 100);
// 相对于当前视口向右滚动40 像素
window.scrollBy(40, 0);
// 滚动到页面左上角
window.scroll(0, 0);
// 滚动到距离屏幕左边及顶边各100 像素的位置
window.scrollTo(100, 100);

这几个方法也都接收一个ScrollToOptions 字典，除了提供偏移值，还可以通过behavior 属性告诉浏览器是否平滑滚动。

// 正常滚动
window.scrollTo({
left: 100,
top: 100,
behavior: 'auto'
});
// 平滑滚动
window.scrollTo({
left: 100,
top: 100,
behavior: 'smooth'
});

导航与打开新窗口

window.open()

四个参数：URL、目标窗口、特性字符串、表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值

如果window.open()的第二个参数是一个已经存在的窗口或窗格（frame）的名字，则会在对应的窗口或窗格中打开URL。

// 与<a href="http://www.wrox.com" target="topFrame"/>相同
window.open("http://www.wrox.com/", "topFrame");

特性字符串是一个逗号分隔的设置字符串，用于指定新窗口包含的特性

window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");