# Response Display Area Changes

# Display Area Size

Display area refers to the area in the Mini Program interface that can be displayed freely. By default, the size of the Mini Program's display area does not change since page initialization. But there are three ways to change this default behavior.

# Enable screen rotation support on your phone

Mini Program base library version 2.4.0 To start, the Mini Program supports screen rotation on the phone. The way to make the page in the Mini Program support screen rotation is to: app.json of window Section setting "pageOrientation": "auto" , or on the page json Configuration in the file "pageOrientation": "auto" 。

The following is on a single page json Example of enabling screen rotation in the file.

Code example:

{
  "pageOrientation": "auto"
}

If the page adds the above statement, the page will rotate as the screen rotates, and the display area will change in size as the screen rotates.

Mini Program base library version 2.5.0 Start, pageOrientation Can also be set to landscape "Fixed for the display.

# in iPad Enable screen rotation support on

Mini Program base library version 2.3.0 Start, in iPad The Mini Program that runs on can support screen rotation. Make Small Program Support iPad The way the screen is rotated is: in the app.json Add in "resizable": true 。

Code example:

{
  "resizable": true
}

If the Mini Program adds the above statement, when the screen rotates, the Mini Program will rotate with it, and the display area size will change as the screen rotates. Note: In iPad You cannot configure whether a page supports screen rotation individually on the.

# Enable large screen mode

Mini Program base library version 2.21.3 Start, in Windows, Mac, car, Android WMPF Small programs running on large screen devices can support large screen mode. May refer toSmall screen adaptation guide. The method is: in the app.json Add in "resizable": true 。

Code example:

{
  "resizable": true
}

If you add the above declaration to the Datong, the default window size of the Datong will be larger and the user will be free to stretch when running on larger devices.

# Media Query

Sometimes, the layout of the page varies for different sizes of the display area. At this point you can use Media query To solve most problems.

Code example:

. my-class {
  width: 40px
}

@media (min-width: 480px) {
  /* Only in 480px Or wider screen to take effect on the style rules */
  .my-class {
    width: 200px
  }
}

in WXML In, you can use the match-media Components in accordance with the Media query Match state display and hide nodes.

In addition, you can create a page or custom component JS Used in this.createMediaQueryObserver() Method to create a [MediaQueryObserver]((MediaQueryObserver )) Object that is used to listen for the specified Media query Of the matching state.

{% Minicode ('TtFaFjmb7aiy') %}

# Screen Rotation Events

Sometimes, just using Media query Unable to control some fine layout changes. At this point you can use js As an adjunct.

in js To read the display area size of the page in the selectorQuery.selectViewport 。

The event that the page size changes, you can use the onResize To listen in. For custom components, you can use the Resize Life cycle to listen. The size information for the display area is returned in the callback function. (From the base library version 2.4.0 Start supporting. ）

Code example:

Page({
  onResize(res) {
    res.size.windowWidth // New display area width
    res.size.windowHeight // New Display Area Height
  }
})

Component({
  pageLifetimes: {
    Resize(res) {
      res.size.windowWidth // New display area width
      res.size.windowHeight // New Display Area Height
    }
  }
})

In addition, it is possible to use the wx.onWindowResize To listen in (but that's not the recommended way).

# Note

• Bug： Android WeChat version 6.7.3 In, live-pusher Component is misoriented when the screen is rotated.