orientationchange

Orientationchange refers to the event that occurs when a device switches between portrait and landscape orientations. Historically, it described the window.orientationchange event on mobile browsers, and the corresponding window.orientation property often exposed a numeric angle such as 0, 90, -90, or 180 degrees.

In modern Web platforms, the Screen Orientation API provides a standardized way to query and react to orientation changes. The API exposes a ScreenOrientation object on window.screen.orientation, with properties like type (for example, portrait-primary or landscape-secondary) and angle. It also offers a change event to notify listeners when the orientation changes. Developers can register a handler via window.screen.orientation.addEventListener('change', handler) and inspect orientation.type or angle to adapt the UI.

Legacy support remains in some environments, where the orientationchange event may fire on window and window.orientation may still be read. However, these legacy mechanisms are not universally reliable and may be deprecated in favor of the Screen Orientation API.

Usage considerations: For layout adaptation, CSS media queries using orientation: portrait or landscape are a common first approach. In scripts, prefer the Screen Orientation API or matchMedia('(orientation: portrait)') as a fallback. The window.orientation property is deprecated in many browsers, so it should be avoided for new development and used only as a fallback for older code. The resize event can be used as a last-resort fallback when detection is not available.

Cross-browser considerations: Support for orientation events and the Screen Orientation API varies by platform and browser version. Implementations should use feature detection and progressive enhancement to provide consistent behavior across devices.