javascript - 此页面如何检测桌面浏览器窗口的移动？

Question

在弄乱一些 DeviceOrientation 的东西时，我遇到了这个页面。

当您摇动浏览器时，网站会做出反应！在这里检测到浏览器移动时使用的是什么 API？我注意到它适用于最新版本的 Safari、Firefox 和 Chrome。

我在 DeviceOrientation 文档和three.js 中都没有看到任何提及这一点...

标签： javascripthtml

Answer 1

他们使用window.screenX/screenY属性来获取浏览器窗口的位置和window.innerWidth/innerHeight窗口的大小。

Window.screenX 只读属性返回用户浏览器视口左边框到屏幕左侧的水平距离（以 CSS 像素为单位）。

该代码中使用了以下函数：

function getBrowserDimensions() {

    var changed = false;

    if (stage[0] != window.screenX) {

        delta[0] = (window.screenX - stage[0]) * 50;
        stage[0] = window.screenX;
        changed = true;

    }

    if (stage[1] != window.screenY) {

        delta[1] = (window.screenY - stage[1]) * 50;
        stage[1] = window.screenY;
        changed = true;

    }

    if (stage[2] != window.innerWidth) {

        stage[2] = window.innerWidth;
        changed = true;

    }

    if (stage[3] != window.innerHeight) {

        stage[3] = window.innerHeight;
        changed = true;

    }

    return changed;

}