# The response shows regional changes

# Show area dimensions

Display areas are areas of the Weixin Mini Program interface that can be freely laid out for display.By default, the size of the Mini Program display area does not change since the page is initialized. But the following three ways can change this default behavior.

# Enable screen rotation support on your phone

Starting with Weixin Mini Program base library version {% version ('2.4.0')%}, Mini Programs support screen rotation on phones.The way to make a page in a Mini Program support screen rotation is to setapagejsonin thewindowparagraph"pageOrientation": "auto", or configure"pageOrigation": "auto" [( in the page json file.

The following is an example of enabling screen rotation in a single-page JSON file.

Code example:

{
  "pageOrientation": "auto"
}

If a page adds the above declaration, the page rotates when the screen rotates, and the display area size changes as the screen rotated.

Starting with Weixin Mini Program base library version {% version ('2.5.0')%},pageOrientationcan also be set tolandscape, indicating fixed horizontal display.

# Enable screen rotation support on iPad

Mini Programs running on iPad can support screen rotation starting with Weixin Mini Program base library version {% version ('2.3.0')%}.Make the Mini Program support iPad screen rotation by adding [apagejson`` "resizable": true。

Code example:

{
  "resizable": true
}

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

# Enable large screen mode

Starting with the Weixin Mini Program base library version {% version ('2.21.3')}, Mini Programs running on large-screen devices such as Windows, Mac, automotive, Android WMPF, etc. can support large-screen mode.Can refer to Mini Program large screen adaptation guide .Method is: Addapagejson"resizable": true`.

Code example:

{
  "resizable": true
}

If Weixin Mini Program adds the above declaration, the default window size of the Mini Program will be larger when running on a large-screen device, and the user can freely stretch it.

# Media Query

Sometimes, the layout of the page varies for different sizes of display areas. At this point, you can use media query to solve most problems.

Code example:

.my-class {
  width: 40px;
}

@media (min-width: 480px) {
  /* 仅在 480px 或更宽的屏幕上生效的样式规则 */
  .my-class {
    width: 200px;
  }
}

In WXML, you can use the match-media component to show and hide nodes according to the matching state of the media query.

In addition, you can use thethis.createMediaQueryObserver ()method to create a MediaQueryObserver object to listen for the matching status of a specified media query.

Preview with Developer Tool

# Screen rotation events

Sometimes, you can't control some subtle layout changes just by using media query. JS can be used as an aid.

To read the display area size of a page in js, you can use selectorQuery.selectViewport .

When the page size changes, you can use the page'sonResizeto listen for.For custom components, you can use resize lifetime to listen. The callback function returns the dimensions of the display area.(Supported starting with the base library version {% version ('2.4.0')%}.))

Code example:

Page({
  onResize(res) {
    res.size.windowWidth // 新的显示区域宽度
    res.size.windowHeight // 新的显示区域高度
  }
})

Component({
  pageLifetimes: {
    resize(res) {
      res.size.windowWidth // 新的显示区域宽度
      res.size.windowHeight // 新的显示区域高度
    }
  }
})

You can also use wx.onWindowResize to listen (but this is not the recommended way).

# Note

• Bug: In Android WeChat version 6.7.3,live-pushercomponent has an abnormal orientation when the screen rotates.