整理浏览器中和屏幕尺寸相关的 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 事件,使得界面可以同步。

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

浏览器窗口尺寸相关的 API 整理图的更多相关文章

  1. jquery和js检测浏览器窗口尺寸和分辨率

    jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...

  2. JS实时获取浏览器窗口尺寸 .

    给div实时设置宽度 <div id="detail" style="width: 100%; overflow: scroll;"> </d ...

  3. 理解javascript中的浏览器窗口——窗口基本操作

    × 目录 [1]窗口位置 [2]窗口大小 [3]打开窗口[4]关闭窗口 前面的话 BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是wi ...

  4. UI: 窗口全屏, 窗口尺寸

    窗口全屏 窗口尺寸 示例1.窗口全屏UI/FullScreen.xaml <Page x:Class="Windows10.UI.FullScreen" xmlns=&quo ...

  5. 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸

    [源码下载] 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 作者:webabcd 介绍背水一战 Windows 10 之 UI 窗口全屏 窗口尺寸 示例1.窗口全屏UI/F ...

  6. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  7. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

  8. java selenium常用API(WebElement、iFrame、select、alert、浏览器窗口、事件、js) 一

     WebElement相关方法 1.点击操作 WebElement button = driver.findElement(By.id("login")); button.clic ...

  9. Javascript和JQuery获取浏览器窗口各种尺寸

    原生JS 窗口尺寸: console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + win ...

  10. selenium常用的API(二)浏览器窗口设置

    浏览器窗口最大化 # encoding=utf-8 from selenium import webdriver driver = webdriver.Ie(executable_path=" ...

随机推荐

  1. js_截取Url值

    "total" -->传递参数时的名字 var reg = new RegExp("(^|&)" + "total" + &q ...

  2. 从源码角度看finish()方法的执行流程

    1. finish()方法概览 首先我们来看一下finish方法的无参版本的定义: /** * Call this when your activity is done and should be c ...

  3. linux笔记:linux常用命令-文件处理命令

    文件处理命令:touch(创建空文件) 文件处理命令:cat(显示文件内容) 文件处理命令:more(分页显示文件内容) 文件处理命令:head(显示文件前面几行) 文件处理命令:tail(显示文件后 ...

  4. Leetcode237:Delete Node in a Linked List

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  5. Java I/O之NIO Socket

    PS:本文简单介绍下旧I/O和NIO下的Socket通讯,仅以UDP来示例. TCP/IP协议 首先简单回顾下TCP/IP协议 Application:应用程序:Socket:套接字:Host:主机: ...

  6. Linux x86_64 APIC中断路由机制分析

    不同CPU体系间的中断控制器工作原理有较大差异,本文是<Linux mips64r2 PCI中断路由机制分析>的姊妹篇,主要分析Broadwell-DE X86_64 APIC中断路由原理 ...

  7. oracle 修改进程

    SQL> show parameter session NAME TYPE VALUE------------------------------------ ----------- ----- ...

  8. Atitit 数据库表文档生成解决方案

    Atitit 数据库表文档生成解决方案 1.1. Sql dml文件结构法 最快速1 1.2. Sql法+sp存储过程 (表格式样)1 1.3. Navicate uml法 (uml格式)2 1.4. ...

  9. Python——列表深浅拷贝

    一.深浅拷贝 如果希望将列表复制一份,通过列表的内置方法copy就可以实现: s = [[1,2],3,4] s1 = s.copy() print(s) print(s1) 拷贝出的列表s1与原列表 ...

  10. Centos 7 下 Corosync + Pacemaker + psc 实现 httpd 服务高可用

    一.介绍 高可用,大家可能会想到比较简单的Keepalived,或者更早一点的 heartbeat,也可能会用到 Corosync+Pacemaker,那么他们之间有什么区别. Heartbeat到了 ...