ons.orientation

Utility methods for orientation detection.

These methods are called directly on the DOM element. Get a reference to the element in JS, and the methods below will be available to call on it. For example: document.querySelector('ons.orientation').someMethod().

Signature Description
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that’s only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.
isPortrait() Returns whether the current screen orientation is portrait or not.
isLandscape() Returns whether the current screen orientation is landscape or not.
on(eventName, listener)

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.
once(eventName, listener)

Add an event listener that’s only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.
off(eventName, [listener])

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.
isPortrait(): Boolean

Returns whether the current screen orientation is portrait or not.

Returns: Will be true if the current orientation is portrait mode.

isLandscape(): Boolean

Returns whether the current screen orientation is landscape or not.

Returns: Will be true if the current orientation is landscape mode.

To use these events, add event listeners to the elements as you would for native events, like click. For example: document.querySelector('ons.orientation').addEventListener('change', function() { ... }).

Some Onsen UI components have overlapping event names. For example, ons-carousel and ons-navigator both emit postchange events. Stop overlapping events from propagating to avoid conflicts: document.querySelector('ons-carousel').on('postchange', e => e.stopPropagation()).

Name Description
change Fired when the device orientation changes.
change

Fired when the device orientation changes.

Parameters
Name Type Description
event Object Event object.
event.isPortrait Boolean Will be true if the current orientation is portrait mode.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.