分辨率更改会导致screen.width更改,但是(可能并不奇怪,因为它们涉及不同的事物)“resize”事件未被触发,并且据我所知没有任何事件被触发。
我知道Proxy对象(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy),因此我编写了一些代码来检测变量何时被设置并执行我的回调,这似乎有效,但在分辨率更改的情况下无效。
因此,我在网上搜索并尝试了这个https://gist.github.com/eligrey/384583(本质上是几个stackoverflow问题提供的答案,实际上是我最初提供的答案,尽管缺少新的Proxy对象提供的抽象)。
这似乎也可以工作(如果我手动设置了screen.width并在执行了screen.watch(“width”,()=> console.log(“hello”))之后进行screen.width = 100;,则会执行我的回调)。但在分辨率更改的情况下不起作用(实际上,最重要的是,分配此观察程序似乎会阻止分配screen.width)。
我有三个问题:
1)当我分配一个观察器/代理时,出了什么问题。
2)我如何找出浏览器在这个细节层面上正在做什么(是什么发送触发器来更改screen.width?我猜这是操作系统,看起来像什么)
3)是否有更好的方法来实现我最初想要的内容(Chrome应用程序调整大小)。
主要我对问题1)感兴趣,对3)不再关心。
要复制我的问题,
- 在Firefox或Chrome中打开一个新标签页
- 进入开发者控制台
- 检查screen.width,更改分辨率,并观察到screen.width的变化
- 从https://gist.github.com/eligrey/384583复制并粘贴代码
- 执行screen.watch("width", (id, oldval, newval) => {console.log("hello"); return newval;});
- 执行screen.width = 100; 并观察到hello被记录并且screen.width被设置为100
- 更改分辨率并观察到screen.width未被设置
编辑 - 正如Bertrand的答案揭示的那样,调整大小事件实际上可能会在分辨率更改时触发,但这似乎是作为响应于分辨率更改而强制边界窗口变小的结果,如果窗口很小,则screen.width可以更改而不触发调整大小事件。
screen.width
。 - georg