How many px is the full screen size of the uniapp page?

With the rapid development of mobile Internet, more and more websites and applications are beginning to adapt to mobile devices. In this process, one problem developers must face is how to maintain a consistent display effect on the page on different devices. One of the key issues is how to achieve full screen page on different devices. This article will explore this issue from the perspective of uniapp.

uniapp is a tool for developing cross-platform applications based on the Vue.js framework. It supports the development of multiple platforms, such as WeChat mini-programs, Alipay mini-programs, H5 pages, etc. Therefore, there may be differences in page display effects between different platforms. In uniapp, if you want to achieve full screen page, you need to understand the concepts of screen resolution and device pixel density, which will be introduced separately below.

1. Screen resolution

Screen resolution refers to the number of pixels the device has in the horizontal and vertical directions, usually expressed as the number of pixels in the width and height of the screen. For example, the screen resolution of the iPhone 12 Pro is 2532×1170 pixels, which means that the device’s screen has 2532 pixels in the horizontal direction and 1170 pixels in the vertical direction.

In uniapp, you can use the uni.getSystemInfoSync() method to obtain the screen width and height information of the device, for example:

let systemInfo = uni.getSystemInfoSync();
let screenWidth = systemInfo.screenWidth; // 设备屏幕宽度
let screenHeight = systemInfo.screenHeight; // 设备屏幕高度

2. Device pixel density

Device pixel density Refers to the number of pixels displayed per inch on the device screen. Usually expressed as dpi or ppi (pixels per inch). For example, the iPhone 12 Pro has a pixel density of 460ppi, which means the number of pixels displayed per inch on the device's screen is 460.

In uniapp, you can use the uni.getSystemInfoSync() method to obtain the pixel density information of the device, for example:

let systemInfo = uni.getSystemInfoSync();
let pixelRatio = systemInfo.pixelRatio; // 设备像素比

3. Implement full screen page

After understanding the screen resolution After understanding the concept of rate and device pixel density, you can start to implement the page full screen. Normally, to achieve full screen in uniapp, you need to set the following two styles:

body {
  overflow: hidden;
}

page {
  width: 100vw;
  height: 100vh;
}

Among them, the body element is used to control the scroll bar of the page, overflow: hidden; can hide the scroll bar; the page element is used to control the page The width and height, width: 100vw; means the page width is the same as the visual window width, height: 100vh; means the page height is the same as the visual window height.

It should be noted that in some cases, some devices may require special styles to achieve full-screen effects. For example, in the Android platform, the following styles need to be set:

page {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

This is because in On the Android platform, the browsers of some devices do not support the vw and vh styles, so you need to use fixed pixel values ​​to set the page width and height, and use absolute positioning to cover the entire screen.

In short, when implementing a full-screen page, you need to understand the screen resolution and pixel density of the device. Special styles may be required for different platforms to achieve the full-screen effect. Developers need to make adjustments based on actual conditions and conduct testing to ensure that they display properly on different devices.

The above is the detailed content of How many px is the full screen size of the uniapp page?. For more information, please follow other related articles on the PHP Chinese website!