javascript detect whether mobile is in landscape or portrait mode

Both methods will detect changes in orientation. The first method is simpler but only works on mobile devices, while the second method is more universal and can work on desktops as well.

Method 1: Using window.orientation

function checkOrientation() {
    if (window.orientation === 0 || window.orientation === 180) {
        console.log("Portrait mode");
    } else if (window.orientation === 90 || window.orientation === -90) {
        console.log("Landscape mode");
    }
}

// Check orientation on load
checkOrientation();

// Update orientation on orientation change
window.addEventListener("orientationchange", checkOrientation);

Method 2: Using window.innerWidth and window.innerHeight

function checkOrientation() {
    if (window.innerWidth > window.innerHeight) {
        console.log("Landscape mode");
    } else {
        console.log("Portrait mode");
    }
}

// Check orientation on load
checkOrientation();

// Update orientation on resize (useful for desktop browsers and responsive design)
window.addEventListener("resize", checkOrientation);