整理瀏覽器中和屏幕尺寸相關的 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 事件，使得界面可以同步。
當然目前還沒有考慮多顯示器的情況，之後再完善。。。