获取窗口位置

使用 window 对象的 screenLeft 和 screenTop 属性可以读取或设置窗口的位置，即相对屏幕左侧和上边的位置。 IE 、 Safari 、 Opera 和 Chrome 都支持这两个属性， Firefox 支持使用 window 对象的 screenX 和 screenY 两个属性， Safari 和 Chrome 同时支持这两个属性。

var LeftPos =
  typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;
var TopPos =
  typeof window.screenTOp == 'number' ? window.screenTop : window.screenY;

不同的浏览器读取位置偏差不同，用户无法在跨浏览器的情况下获取精确的位置。

移动窗口

moveTo() 和 moveBy() 两个方法都容易被浏览器禁用。同时，这两个方法不适用于框架，仅适用于最外层的 window 对象。

moveTo 方法

利用 moveTo 方法可以将窗口移动到指定坐标（ x ， y ）处。

语法格式如下：

window.moveTo(x, y);

x ：窗口左上角的 x 坐标。

y ：窗口左上角的 y 坐标。

例如，将窗口移动到指定的坐标（ 300， 300）处，代码如下：

window.moveTo(300, 300);

moveTo 方法是 Navigator 和 IE 都支持的方法，它不属于 W3C 标准的 DOM 。

resizeTo 方法

利用 resizeTo 方法可以将当前窗口变成（ x ， y ）大小， x 、 y 分别为宽度和高度。

语法格式如下：

window.resizeTo(x, y);

x ：窗口的水平宽度。

y ：窗口的垂直高度。

例如，将当前窗口改变成（ 300， 200）大小，代码如下：

window.moveTo(300, 200);

Screen 对象

Screen 对象是 JavaScript 中的屏幕对象，反映了当前用户的屏幕设置。

24 位颜色（ 通常为"真彩色"）支持大概 1600万种颜色 |

| availHeight | 返回窗口内容区域的垂直尺寸，以像素为单位 |

| availWidth | 返回窗口内容区域的水平尺寸，以像素为单位 |

例如，使用 Screen 对象设置屏幕属性，代码如下：

screen.width; //屏幕宽度
screen.height; //屏幕高度
screen.colorDepth; //屏幕色深
screen.availWidth; //可用宽度
screen.availHeight; //可用高度 (除去任务栏的高度 )

控制窗口大小

使用 window 对象的 innerWidth 、 innerHeight 、 outWidth 、 outHeight 这四个属性可以确定浏览器窗口的大小。

在不同浏览器中确定浏览器窗口大小没有想象中那么容易。所有现代浏览器都支持 4 个属性： innerWidth 、 innerHeight 、 outerWidth 和 outerHeight 。 outerWidth 和 outerHeight 返回浏 览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格 <frame>中使用）。 innerWidth 和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。

var pageWidth = window.innerWidth,
  pageHeight = window.innerHeight;
if (typeof pageWidth != 'number ') {
  if (document.compatMode == 'CSS1Compat ') {
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
  }
}

在移动设备上， window.innerWidth 和 window.innerHeight 返回视口的大小，也就是屏幕上 页面可视区域的大小。 Mobile Internet Explorer 支持这些属性，但在 document.documentElement. clientWidth 和 document.documentElement.clientHeight 中提供了相同的信息。在放大或缩小 页面时，这些值也会相应变化。

在其它移动浏览器中， document.documentElement.clientWidth 和 document.documentElement. clientHeight 返回的布局视口的大小，即渲染页面的实际大小。布局视口是相对于可见视口的概念， 可见视口只能显示整个页面的一小部分。 Mobile Internet Explorer 把布局视口的信息保存在 document.body.clientWidth 和 document.body.clientHeight 中。在放大或缩小页面时，这些值也会相应变化。 因为桌面浏览器的差异，所以需要先确定用户是不是在使用移动设备，然后再决定使用哪个属性。

改变窗口大小

可以使用 resizeTo()和 resizeBy()方法调整窗口大小。这两个方法都接收两个参数， resizeTo() 接收新的宽度和高度值，而 resizeBy()接收宽度和高度各要缩放多少。

window.resizeBy(x, y);

• x ：放大或缩小的水平宽度
• y ：放大或缩小的垂直高度

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

窗口滚动

利用 Window 对象的 scroll 方法可以指定窗口的当前位置，从而实现窗口滚动效果。

语法格式如下：

scroll(x, y);

• x ：屏幕的横向坐标
• y ：屏幕的纵向坐标

Window 对象中有 3种方法可以用来滚动窗口中的文档。

• window.scroll(x,y)
• window.scrollTo(x,y)
• window.scrollBy(x,y)

以上 3种方法的具体解释如下。

scroll ：该方法可以将窗口中显示的文档滚动到指定的绝对位置。滚动的位置由参数 x 和 y 决定，其中 x 为要滚动的横向坐标， y 为要滚动的纵向坐标。两个坐标都是相对文档的左上角而言的，即文档的左上角坐标为（ 0， 0）。

scrollTo ：该方法的作用与 scroll 方法完全相同。 scroll 方法是 JavaScript 1.1中所规定的，而 scrollTo 方法是 JavaScript 1.2中所规定的。建议使用 scrollTo 方法。

scrollBy ：该方法可以将文档滚动到指定的相对位置上，参数 x 和 y 是相对当前文档位置的坐标。如果参数 x 的值为正数，则向右滚动文档；如果参数 x 的值为负数，则向左滚动文档。与此类似，如果参数 y 的值为正数，则向下滚动文档；如果参数 y 的值为负数，则向上滚动文档。

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

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

控制窗口状态栏 status 方法

改变状态栏中的文字可以通过 Window 对象的 status 方法实现。 status 方法的主要功能是设置或给出浏览器窗口中状态栏的当前显示信息。

语法格式如下：

window.status = str;

default status 方法

语法格式如下：

window.defaultStatus = str;

status 方法与 defaultStatus 方法的区别在于信息显示时间的长短。 defaultStatus 方法的值会在任何时间显示，而 status 方法的值只在某个事件发生的瞬间显示。

窗口时间与超时设定

可以设置一个窗口在某段时间后执行何种操作，称为设置超时。本小节给出一个设置超时的实例，可以在一定时间后关闭浏览器，也可取消超时设置。主要使用了 Window 对象的 setTimeout 方法和 clearTimeout 方法，其主要功能和用法如下。

Window 对象的 setTimeout 方法用于设置一个超时，以便在将来的某个时间触发某段代码的运行。基本语法是

const timerId = setTimeout(() => {
  // ....
}, delay);

其中，"要执行的代码 "可以是一个函数，也可以是其它 JavaScript 语句；"以毫秒为单位的时间 "指代码执行前需要等待的时间，即超时时间。

可以在超时事件执行前中止该超时设置，使用 Window 对象的 clearTimeout 方法实现。其语法为 "clearTimeout(timerId) "。

像素比

CSS 像素是 Web 开发中使用的统一像素单位。这个单位的背后其实是一个角度： 0.0213°。如果屏 幕距离人眼是一臂长，则以这个角度计算的 CSS 像素大小约为 1/96 英寸。这样定义像素大小是为了在不同设备上统一标准。比如，低分辨率平板设备上 12 像素（ CSS 像素）的文字应该与高清 4K 屏幕下 12 像素（ CSS 像素）的文字具有相同大小。这就带来了一个问题，不同像素密度的屏幕下就会有不同的 缩放系数，以便把物理像素（屏幕实际的分辨率）转换为 CSS 像素（浏览器报告的虚拟分辨率）。

举个例子，手机屏幕的物理分辨率可能是 1920×1080，但因为其像素可能非常小，所以浏览器就需 要将其分辨率降为较低的逻辑分辨率，比如 640×320。这个物理像素与 CSS 像素之间的转换比率由 window.devicePixelRatio 属性提供。对于分辨率从 1920×1080 转换为 640×320 的设备， window. devicePixelRatio 的值就是 3。这样一来， 12 像素（ CSS 像素）的文字实际上就会用 36 像素的物理 像素来显示。

window.devicePixelRatio 实际上与每英寸像素数（ DPI ， dots per inch ）是对应的。 DPI 表示单 位像素密度，而 window.devicePixelRatio 表示物理像素与逻辑像素之间的缩放系数。