Question

在弄乱一些DeviceOrientation内容时，我碰到了this页。

当您摇动浏览器时，网站会做出反应！在此处检测到浏览器移动的地方使用了什么API？我注意到它可以在Safari，Firefox和Chrome的最新版本中使用。

在DeviceOrientation文档中，或者在three.js中，我都没有提到这一点。

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;

}

Answer 2

使用screen.orientation属性。 reference

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

2 个答案: