uniapp prohibits horizontal screen

Abstract: This article mainly introduces how to disable horizontal screen in uniapp applications to prevent layout confusion and user experience degradation caused by horizontal screen.

In mobile application development, both horizontal screen mode and vertical screen mode are very important layout methods. Landscape mode allows applications to occupy more space in the horizontal direction and improve the efficiency of information display. However, relying too much on landscape mode will lead to confusion in the overall layout of the application, thus affecting the user experience. Therefore, for some applications that focus on user experience, it is very necessary to prohibit horizontal screen.

In the uniapp application, disabling horizontal screen can be achieved in two ways: CSS style and JS code.

CSS style method

By adding the following code to the application style file, you can disable horizontal screen:

@media screen and (orientation:landscape){
    html,body{
        transform: rotate(90deg);
        transform-origin: center center 0;
    }
}

The function of this code is to rotate the screen to horizontal In screen mode, rotate the page 90 degrees to keep it in portrait mode. However, it should be noted that this method cannot completely prohibit the user from rotating the screen. The user can still achieve screen rotation by turning on the automatic rotation function in the system settings.

JS code method

By using JS code in the Vue file of the application to control the horizontal and vertical screen modes, the horizontal screen function of the application can be completely disabled. The specific implementation method is as follows:

mounted() {
  this.$nextTick(() => {
    this.initWindowEvent()
  })
},
methods: {
  initWindowEvent() {
    let $this = this
    window.addEventListener('resize', $this.restrictRotate)
    $this.restrictRotate()
  },
  restrictRotate() {
    let angle = window.orientation
    if (angle === 90 || angle === -90) {
      window.orientation = 0
      document.body.style.display = 'none'
      alert('该应用不支持横屏，请使用竖屏浏览')
    } else {
      document.body.style.display = 'block'
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.restrictRotate)
  }
}

The function of this code is to initialize the window event after the application is mounted to the DOM. When the screen is rotated to landscape mode, it forces the screen to rotate back to portrait mode and prompts the user " This app does not support landscape orientation, please use portrait orientation." It should be noted that since the JS method can completely prohibit horizontal screen, some applications may require special processing. For example, applications that require horizontal screen display can display a prompt box in landscape mode to prompt the user to rotate the screen to view.

The above is the detailed content of uniapp prohibits horizontal screen. For more information, please follow other related articles on the PHP Chinese website!