Monaca Onsen UI Discord Chat Github Repo

<ons-orientation> how to use it please?

  • Hi All,

    I am new to Onsen UI. I want to change individual page orientation like one page work only in portrait mode, one another for landscape mode. How can I do that?


  • Onsen UI

    @mmike The docs for ons.orientation object are here.

    It simply emits change events whenever the device orientation changes. A simple way to change the displayed content would be toggling a CSS class in the body. For example:

    ons.orientation.on('change', function(event) { 
      document.body.classList.toggle('landscape', !event.isPortrait);

    Then, your pages can be like this:

      <div class="content">
        <div class="potrait_content">...</div>
        <div class="landscape_content">...</div>

    And apply CSS rules to toggle them:

    body.landscape  .portrait_content {
      display: none;
    body:not(.landscape)  .landscape_content {
      display: none;

    Hope it helps!

  • Thanks Fran!

    Is there a method to rotate the screen to 90 degrees(to change page orientation) using onsen UI?

    Once again… Thanks!

  • Onsen UI

    @mmike No, ons.orientation only detects changes, it does not make changes.