Skip to main content
Use this API to listen for screen orientation changes. The callback triggers whenever the device orientation changes.

​
Parameters

PropertyTypeRequiredDescription
callbackFunctionYesCallback function when orientation changes

​
Callback Parameters

PropertyTypeDescription
orientationStringNew orientation: portrait, landscape, portraitUpsideDown, landscapeLeft, landscapeRight

​
Code Example

​
Basic Usage

my.onScreenOrientationChange((res) => {
  console.log('Orientation changed to:', res.orientation);
});

​
Responsive Layout

Page({
  data: {
    layout: 'portrait'
  },

  onLoad() {
    my.onScreenOrientationChange(this.handleOrientationChange);
  },

  handleOrientationChange(res) {
    const layout = res.orientation.includes('landscape')
      ? 'landscape'
      : 'portrait';

    this.setData({ layout });
    this.adjustLayout(layout);
  },

  adjustLayout(layout) {
    if (layout === 'landscape') {
      // Show expanded view
      this.setData({ columns: 4, showSidebar: true });
    } else {
      // Show compact view
      this.setData({ columns: 2, showSidebar: false });
    }
  },

  onUnload() {
    my.offScreenOrientationChange(this.handleOrientationChange);
  }
});

​
Video Player Auto-Fullscreen

Page({
  onLoad() {
    my.onScreenOrientationChange((res) => {
      if (res.orientation.includes('landscape')) {
        this.videoContext.requestFullScreen();
      } else {
        this.videoContext.exitFullScreen();
      }
    });
  }
});
Remember to remove the listener with my.offScreenOrientationChange when the page unloads to prevent memory leaks.

my.offScreenOrientationChange

Stop listening

my.setScreenOrientation

Set orientation