浏览器窗口尺寸相关的 API 整理图
整理浏览器中和屏幕尺寸相关的 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 整理图的更多相关文章
- jquery和js检测浏览器窗口尺寸和分辨率
jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...
- JS实时获取浏览器窗口尺寸 .
给div实时设置宽度 <div id="detail" style="width: 100%; overflow: scroll;"> </d ...
- 理解javascript中的浏览器窗口——窗口基本操作
× 目录 [1]窗口位置 [2]窗口大小 [3]打开窗口[4]关闭窗口 前面的话 BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是wi ...
- UI: 窗口全屏, 窗口尺寸
窗口全屏 窗口尺寸 示例1.窗口全屏UI/FullScreen.xaml <Page x:Class="Windows10.UI.FullScreen" xmlns=&quo ...
- 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸
[源码下载] 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 作者:webabcd 介绍背水一战 Windows 10 之 UI 窗口全屏 窗口尺寸 示例1.窗口全屏UI/F ...
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- java selenium常用API(WebElement、iFrame、select、alert、浏览器窗口、事件、js) 一
WebElement相关方法 1.点击操作 WebElement button = driver.findElement(By.id("login")); button.clic ...
- Javascript和JQuery获取浏览器窗口各种尺寸
原生JS 窗口尺寸: console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + win ...
随机推荐
- 113_Power Pivot 销售订单之重复购买率及购买间隔天数相关
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 1.背景 在论坛中看到朋友在提复购率(重复购买率)等相关问题,今天把结果贴出来. 问题原贴:计算订单中的老顾客复购率 感谢 ...
- MySQL - 数据库的隔离级别
MySQL - 数据库的隔离级别 隔离级别 脏读(Dirty Read) 不可重复读(NonRepeatable Read) 幻读(Phantom Read) 未提交读(Read uncommitte ...
- zigbee技术数传电台在石油探井状态监测系统
石油探井分布分散,数量众多,出现异常现象需及时处理.人工巡视耗时长.时效性差:有线传输存在布线繁琐.成本高.现场无移动网络覆盖等诸多缺点. 现需要一种支持大量接入.覆盖范围广.数据传输高效且有数据中心 ...
- Oracle常见问题解决方法
1.设置数据库用户的密码有效期为 无限制 --查询proile文件名 SELECT username,PROFILE FROM dba_users; --查询文件 的密码保护策略 SELECT * F ...
- 前端ES6 特性兼容查询
ES6 http://kangax.github.io/compat-table/es6/ ES5 http://kangax.github.io/compat-table/es5/ ES 2016+ ...
- IE让我首次遭受了社会的毒打
2022年6月15日,微软终止对IE的支持,自此IE走入历史,可以说这是一个时代的终结. 自己在 2011 年刚从业时,IE 在国内的市场占有率可是遥遥领先的,下图来自于 StatCounter 网站 ...
- vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9
项目从vue2 升级vue3,VueI18n需要做适当的调整.主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化: 具体可以参看:https://vue- ...
- 基于SqlSugar的开发框架循序渐进介绍(9)-- 结合Winform控件实现字段的权限控制
字段的权限控制,一般就是控制对应角色人员对某个业务对象的一些敏感字段的可访问性:包括可见.可编辑性等处理.本篇随笔结合基于SqlSugar的开发框架进行的字段控制管理介绍. 在设计字段权限的时候,我们 ...
- python小题目练习(十一)
题目:大乐透号码生成器 需求:使用Random模块模拟大乐透号码生成器,选号规则为:前区在1 ~ 35的范围内随机产生不重复 的5个号码,后区在1~ 12的范围内随机产生不重复的2个号码.效果如图8. ...
- docker 映射端口穿透内置防火墙
一.问题现象 1.现象举例: # 自制的springboot项目的dockerfile # springboot 其实就是一个简单的hello-world程序,写了一个HelloController ...