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

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

《浏览器窗口尺寸相关的 API 整理图》

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

《浏览器窗口尺寸相关的 API 整理图》

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

《浏览器窗口尺寸相关的 API 整理图》

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

《浏览器窗口尺寸相关的 API 整理图》

注意,页面缩放比并非 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,其他环境可能会有偏差。并且未考虑缩放比)

《浏览器窗口尺寸相关的 API 整理图》

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

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

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

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

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

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

    原文作者:EtherDream
    原文地址: https://www.cnblogs.com/index-html/p/js-screen-size-api.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞