# Resize Response Display Area

# Display Area Size

The display area refers to the area in Mini Program interface where you can arrange elements freely. By default, the size of the display area remains unchanged after the page initialization. But you can change the default size by either of the following two ways.

# Enable Screen Rotation on a Phone

Mini Programs support screen rotation as of base library version 2.4.0. To allow the Mini Program pages to support screen rotation, set "pageOrientation": "auto" in the window segment of app.json, or configure "pageOrientation": "auto" in the page json file.

The following example shows how to enable screen rotation in a single page json file.

Code example:

{
  "pageOrientation": "auto"
}

If the above declaration is added to the page, the page rotates and the display area is resized as the screen rotates.

As of library version 2.5.0, pageOrientation can be set to landscape, which locks the screen orientation to "Landscape".

# Enable Screen Rotation on an iPad

Mini Programs running on iPad support screen rotation as of base library 2.3.0. To allow the Mini Program to support screen rotation, add "resizable": true to app.json.

Code example:

{
  "resizable": true
}

If the above declaration is added to the Mini Program, the Mini Program page rotates and the display area is resized as the screen rotates. Note: You cannot enable or disable screen rotation for a single page.

# Media Query

Sometimes, the page layout varies with the size of the display area. You can use "media query" to solve most of the problems.

Code example:

.my-class {
  width: 40px;
}

@media (min-width: 480px) {
  /* Style rule that only takes effect on  480px  or wider screens */
  .my-class {
    width: 200px;
  }
}

# Screen Rotation Event

Sometimes, subtle layout changes cannot be controlled by using "media query" alone. In this case, js can be used.

You can use selectorQuery.selectViewport to read the size of the display area of the page in js.

The onResize of the page can be used to listen to the page resizing event. For custom components, you can use the "resize lifecycle" function to listen to the event. The callback function returns the size of the display area. (This is supported as of base library version 2.4.0.)

Code example:

Page({
  onResize(res) {
    res.size.windowWidth // New width of display area
    res.size.windowHeight // New height of display area
  }
})

Component({
  pageLifetimes: {
    resize(res) {
      res.size.windowWidth // New width of display area
      res.size.windowHeight // New height of display area
    }
  }
})

In addition, you can also use wx.onWindowResize to listen to the event (not recommended).

Bug & tips:

• Bug: In Weixin 6.7.3 for Android, an error occurs with the screen orientation when the screen is rotated for the live-pusher component.