浏览器窗口尺寸相关的 API 整理图 - EtherDream

预览

整理浏览器中和屏幕尺寸相关的 API：

其中和文档相关的属性，例如 innerWidth、innerHeight、event.x、event.y 的单位为 CSS 像素，如果页面存在缩放，则需乘上缩放比。

假如当前页面缩放比为 125%，那么取到的 innerWidth 和 innerHeight 值比 100% 时要小，需乘以 1.25 才是 100% 时的值。

同理，假如当前页面缩放比为 80%，那么取到的 innerWidth 和 innerHeight 值比 100% 时要大，需乘以 0.8 才是 100% 时的值。

注意，页面缩放比并非 window.devicePixelRatio 属性，该属性还包括了系统屏幕的缩放。例如高分辨率显示器通常放大一倍，这样即使页面 100% 未缩放，devicePixelRatio 初始值就是 2。

在触摸屏或触控板上使用双指缩放页面时 innerWidth 和 innerHeight 不会变，但 visualViewport 中的属性会变，其中 scale 为缩放比。

由于缺少类似 innerLeft、innerTop 属性，因此左侧面板的宽度和上方面板的高度无法直接获取，只能通过鼠标事件的 event.screenX/Y 减去窗口的 X/Y 间接获取。因此至少需触发一次 MouseMove 事件才能获取这些值。

根据这些信息，我们不仅可获取屏幕、窗口尺寸和坐标，甚至还能计算出浏览器上下左右 4 个面板的尺寸。

演示：https://etherdream.com/screen-info/

(目前只模拟了 macOS / Chrome，其他环境可能会有偏差。并且未考虑缩放比)

该演示根据当前屏幕和浏览器窗口尺寸，进行同比例还原。当你拖动、缩放浏览器窗口时，虚拟窗口会随之同步；当你调整面板（例如控制台）的尺寸时，界面也会改变。

即使你调整系统 dock 的尺寸或位置，程序也能感知到，因为改变 dock 会影响 screen.avail* 属性。当然 dock 的尺寸和图标数量有关，因此宽度（如果 dock 在下方）或高度（如果 dock 在两侧）只能猜测，而非准确。

演示页面打开后，文档部分默认不显示，必须触发 MouseMove 事件才能根据 event.screenX/Y 推测出文档部分（绿色）的坐标。

如果将左侧面板（例如停靠左侧的控制台）的宽度调小，界面不会立即同步，而必须等下次 MouseMove 事件才能同步。

如果将左侧面板的宽度调大，理论上界面也不会同步，但实际上调大的过程中鼠标往右移动，面板缩放可能跟不上鼠标移动的速度，因此很容易触发 MouseMove 事件，使得界面可以同步。

当然目前还没有考虑多显示器的情况，之后再完善。。。