这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战
前言
今天我们再来聊一聊web端窗口和移动端窗口的一些小知识点和一些需要注意的点。windows对象的位置可以通过不同的属性和方法来确定。现代浏览器提供了screenLeft和screen属性，用于表示窗口的相对于屏幕左侧和顶部的位置，返回值是CSS像素。我们就对于像素比和视口大小来具体说一说吧。
视口位置
浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文档。
度量文档相对于视口滚动距离的属性有两对，返回相等的值:window.pageXoffset/window.scrollx 和window.pageYoffset/window.scrollY.
可以使用scroll()、 scrollTo()和scrollBy()方法滚动贝面。这3个万法郁按仪农小怕刈忧口此离的x和y坐标，这两个参数在前两个方法中表示要滚动到的坐标,在最后一个方法中表示滚动的距离。
//相对于当前视口向下滚动100像素
window.scrollBy（0,100);
//相对于当前视口向右滚动40像素window.scrollBy(40,0）;
/滚动到页面左上角
window. scrollTo（0,0);
在不同浏览器中确定浏览器窗 口大小没有相象中那么容易。所有现代浏览器都支持4个属性: innerWidth、innerheignt、outerWidth和 outerHeight.
outerWidth outerHeight返回浏 览器窗口目身的大小（个官是在最外层 window上使用，还是在窗格中使用)。 和innerHeight 及凹测览器窗口中页面视口的大小（不包含浏览器边框 document.clientwidth和 document .documen ntElement.clientHeight 返回页面视口的宽度和高度。 如下所示: 浏览器窗口自身的精确尺寸不好确定,但可以确定页面视口的大小,
let pageWidth =window. innerWidth,
pageHeight =window. innerHeight;
if (typeof pagewidth != "nt
if（document .compatMode
二= "csS1Compat"){
.clientWidth;
pageWidth = document.documentElement.
pageHeight = document.documentElement.clientHeight;}else {
pageWidth = document .body.clientWidth;
. body.clientHeight;
pageHeight = document Ow.innerWidth 和window. pageHeight 的值分别设置为windc 这里，先将 paaeWidth 和 通过document.compatMode Width 是不是一个数值，如果不是则 innerHeiaht然后.检查 page ntElement.clientWidth 和 如果是，则使用 document.docume 来检杳页面是否外为标准模式。
像素比
CSS像素是 Web开发中使用的统一像素单位。这个单位的背后其实是 一个角度:0.0213。如果屏 幕距离人眼是一臂长，则以这个角度计算的CSS像素大小约为1/96英寸。 这样定义像素大小是为了在 不同设备上统一标准。比如，低分辨率平板设备上12像素（CSS像素）的 文字应该与高清4K屏幕下 12像素（CSS像素）的文字具有相同大小。这就带来了一个问题,不同像素 密度的屏幕下就会有不同的 缩放系数,以便把物理像素（屏幕实际的分辨率）转换为CSS像素（浏览 器报告的虚拟分辨率)。 举个例子,手机屏幕的物理分辨率可能是1920×1080，但因为其像素 可能非常小,所以浏览器就需 要将其分辨率降为较低的逻辑分辨率，比如640×320。这个物理像素与 csS 像素之间的转换比率由 window .devicePixelRatio属性提供。对于分辨率从1920×1080转换 为640×320的设备, winaow.实际上就会用 36像素的物理 devicePixelRatio 的值就是3。这样一来，12像素（CSS像素）的文字 像素来显示。
实际上与每英寸像素数（DPI, dots per inch)是对应的。DPI表示单 window.devicePixelRatio 之间的缩放系数。 位像素密度，而window.devicePixelRatio表示物理像素与逻辑像素
