Как эта страница обнаруживает движение окна браузера на рабочем столе?

Question

В недоумении с некоторыми устройствами DeviceOrientation я наткнулся на эту страницу.

Когда вы трясете браузер, сайт реагирует!Какой API используется здесь, где обнаруживается движение браузера?Я заметил, что это работает в последних версиях Safari, Firefox и Chrome.

Я не вижу упоминаний об этом ни в документах DeviceOrientation, ни в three.js ...

Answer 1

Они используют свойства window.screenX/screenY для определения положения окна браузера и window.innerWidth/innerHeight для определения размера окна.

Окно Window.screenX прочитаноСвойство -only возвращает горизонтальное расстояние в пикселях 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. ссылка