Orientation Change
Detect and respond to orientation changes to adjust layout or dismiss UI panels when the user rotates their device.
jQuery
Intermediate
3 min read
Handling Orientation Changes
Example
$(window).on("orientationchange", function() {
const isLandscape = window.orientation === 90 || window.orientation === -90;
$("body").toggleClass("landscape", isLandscape);
// Close modals in landscape on small screens
if (isLandscape && window.innerHeight < 400) $(".modal").modal("hide");
});
// Modern approach with Screen API (preferred)
screen.orientation.addEventListener("change", () => {
const type = screen.orientation.type; // "landscape-primary", "portrait-primary"
adjustLayoutForOrientation(type);
}); Pro Tip
window.innerHeight after orientation change gives the new viewport height for layout adjustments.