[Edit]

JavaScript - detect device orientation

1 contributors

2 contributions

0 discussions

10 points

Created by:

a_horse

538

In this short article we would like to show, how to detect device orientation using JavaScript.

Quick solution:

xxxxxxxxxx
 
console.log(screen.availWidth > screen.availHeight ? 'landscape': 'portrait');

Auto running

Reusable logic

Edit

Device orientation detection is not simple process when we want to know exact orientation. In the past was many approaches to do orientation detection.

In this section, you can find implementations that let to get orientation and handle its changes providing quite good performance.

1. Legacy version

Edit

This solution doesn't provide information about screen inversion, but it works in older web browsers.

xxxxxxxxxx
 
window.ORIENTATION = {
    addListener: (callback) => {
        let previousValue = screen.availWidth > screen.availHeight;
        window.addEventListener('resize', (e) => {
            const currentValue = screen.availWidth > screen.availHeight;
            if (previousValue !== currentValue) {
                previousValue = currentValue;
                callback(e);
            }
        });
    },
    getState: () => {
        return screen.availWidth > screen.availHeight ? 'landscape': 'portrait';
    }
};
​
​
// Usage example:
​
ORIENTATION.addListener(() => {
    console.log(`orientation: ${ORIENTATION.getState()}`);
});
​
console.log(`orientation: ${ORIENTATION.getState()}`);

Auto running

2. Full solution

Edit

This solution provides information about screen orientation and inversion.

screen.orientation API used in the solution is not supported by some web browsers (we have 2023). This is reason why it was combined with legacy version solving the problem.

xxxxxxxxxx
 
const STATES = {
     '90': 'landscape-primary',    // landscape
    '-90': 'landscape-secondary',  // landscape (inverted)
      '0': 'portrait-primary',     // portrait
    '180': 'portrait-secondary'    // portrait  (inverted)
};
​
const VARIANTS = [
    {
        event: () => 'change',                         // modern web browsers
        object: () => screen.orientation,              //
        state: (object) => object.type                 //
    },
    {
        event: () => 'mozorientationchange',           // older Firefox web browsers
        object: () => screen,                          //
        state: (object) => object.mozOrientation       //
    },
    {
        event: () => 'msorientationchange',            // older Edge web browsers
        object: () => screen,                          //
        state: (object) => object.msOrientation        //
    },
    {
        event: () => 'orientationchange',              // some mobile web browsers
        object: () => window,                          //
        state: (object) => STATES[window.orientation]  //
    }
];
​
const createOrientation = () => {
    for (const variant of VARIANTS) {
        const object = variant.object();
        if (object) {
            const event = variant.event();
            if ('on' + event in object) {
                return {
                    addListener: (callback) => object.addEventListener(event, callback),
                    getState: () => {
                        const type = variant.state(object);
                        if (type) {
                            const parts = type.split('-');
                            return {
                                type: parts[0] ?? 'UNKNOWN',
                                inverted: parts[1] !== 'primary'
                            };
                        }
                        return null;
                    }
                };
            }
        }
    }
    // legacy version
    return {
        addListener: (callback) => {
            let previousValue = screen.availWidth > screen.availHeight;
            window.addEventListener('resize', (e) => {
                const currentValue = screen.availWidth > screen.availHeight;
                if (previousValue !== currentValue) {
                    previousValue = currentValue;
                    callback(e);
                }
            });
        },
        getState: () => {
            return {
                type: screen.availWidth > screen.availHeight ? 'landscape': 'portrait',
                inverted: null
            };
        }
    };
};
​
const ORIENTATION = createOrientation();
​
​
​
// Usage example:
​
if (ORIENTATION) {
    const printState = () => {
        const state = ORIENTATION.getState();
        console.log(`orientation: ${state?.type ?? 'UNKNOWN'}, inverted: ${state?.inverted ?? null}`);
    };
    ORIENTATION.addListener(() => printState());
    printState();
} else {
    console.error('Orientation API is not supported.');
}