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. |
Add an event listener.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Add an event listener that’s only triggered once.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Remove an event listener. If the listener is not specified all listeners for the event type will be removed.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Returns whether the current screen orientation is portrait or not.
Returns: Will be true if the current orientation is portrait mode.
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. |
Fired when the device orientation changes.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.isPortrait | Boolean | Will be true if the current orientation is portrait mode. |
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.