目录

What is the baseline in vp for UI layouts to achieve cross-device adaptation?

In HarmonyOS, the default layout unit is vp. This ensures that the visual appearance of components remains consistent across different screen resolutions and densities.

The formula for calculating vp from physical pixels (px) is as follows: vp = px/(DPI/160).

px is the true physical pixel value of the screen. densityDPI refers to the system screen density. densityPixels indicates the ratio of the screen density relative to the standard DPI. Common values for densityPixels are 0.75, 1.0, 1.5, 2.0, and 3.0. In HarmonyOS, the standard DPI is 160. For example, for the Huawei Mate 40 Pro, densityPixels is 3.5, and densityDPI is 560. To view the DPI of a device, call the display API in the screen properties.

import { display } from '@kit.ArkUI';

let displayClass: display.Display | null = null;
try {
  displayClass = display.getDefaultDisplaySync();
} catch (exception) {
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}

If the prototype does not provide the layout in vp units, you can convert px to vp based on densityPixels. HarmonyOS also provides ready-made APIs px2vp() and vp2px() for you to call directly.

Reference

Pixel Units, @ohos.display (Display)