The response shows a change in the area

Show area dimensions

The display area refers to the area in the small program interface that can be freely laid out. B y default, the size of the small program display area does not change from the initialization of the page. However, there are two ways to change this default behavior.

Enable screen rotation support on your phone

Starting with the base library version 2.4.0, the small program supports screen rotation on the phone. The way to make a page in a small program support screen rotation is to set "pageOrientation": "auto" in the window segment of app.json, or configure "pageOrientation": "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 the page adds the above declaration, the page rotates as the screen rotates, and the size of the display area changes as the screen rotates.

Starting with the base library version 2.5.0, pageOrientation can also be set to landscape, which means fixed to a horizontal display.

Enable screen rotation support on iPad

Starting with the base library version 2.3.0, small programs running on iPad can support screen rotation. The way to make the applet support iPad screen rotation is to add "resizable" to app.json: true.

Code example:

{
  "resizable": true
}

If the small program adds the above declaration, the small program rotates as the screen rotates, and the size of the display area changes as the screen rotates. Note: You can't configure whether a page supports screen rotation individually on your iPad.

Media Query

Sometimes, the layout of the page will be different for display areas of different sizes.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 display the node according to the Media Query matching status.

In addition, you can use this.createMediaQueryObserver () method in page or custom component JS to create a MEDIA Query matching status.

Screen rotation event

Sometimes, just use Media Query unable to control some fine layout changes.You can use JS as auxiliary.

Read the display area size of the page in JS, you can use SelectorQuery.selectViewPort.

The page size changes, you can use the onResize of the page to listen.For custom components, you can use the Resize life cycle to listen.The size information of the display area will be returned in the callback function.(Start support from the basic library 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 approach).

Bug & tips:

• Bug: In Android WeChat version 6.7.3, the live-pusher component rotates in an abnormal direction as the screen rotates.