Defining Adaptive Layout Properties Using Device-Independent Pixels
Understand the role of device-independent pixels in designing adaptive Forms and Dashboards that look the same across different devices and screen resolutions, and learn how to convert between physical pixels and device-independent pixels.
Device-independent pixels (DIP) is an artificial unit of measurement that measures the logical space consumed by content on a display. Cherwell utilizes device-independent pixels to define UI elements for Dashboards and Forms. When the Dashboard or Form is rendered on a specific device, the browser gathers information about its DIP dimensions and renders the Dashboard or Form appropriately for the device's pixel density. This ensures that the visual elements retain their logical sizes across many devices with different densities.
When designing Adaptive Layouts you must define the height and width of a layout using device-independent pixels. Screen resolution specifications are usually given in physical pixels, so you may need to look up the DIP measurements for your device or perform the conversion to DIP yourself before you begin designing. With some basic device specifications you can easily convert between physical pixels and device-independent pixels. The conversion formula is slightly different for Android and iOS operating systems. To start, understand the following terms:
- A physical pixel (px) is defined as a single point of programmable color on a display. Physical pixels have different sizes depending on the display's resolution: high-resolution screens have a greater number of relatively small physical pixels while low-resolution screens have a smaller number of relatively large physical pixels.
- Dots-per-inch (DPI) is also called pixels-per-inch. This measurement indicates the number of physical pixels that fit in one logical inch on a display. High-resolution screens have smaller physical pixels, so they will contain more pixels per logical inch than low-resolution screens.
- Density measures the magnitude of pixel density on a display. This measurement is usually rounded to the nearest half or whole number. One density-independent pixel is equivalent to one physical pixel on a device with the density 1.0 (also called medium-density or MDPI). Density-independent pixels are scaled proportionally on higher- or lower-density screens so that one DIP on a screen with the density 2.0 (XHDPI) encompasses four physical pixels (two across and two down).
The following table shows the measurements for a sample device:
| Screen resolution (physical pixels) | Dots-per-inch | Density | Screen resolution (device-independent pixels) |
|---|---|---|---|
| 1080 x 1920 | 424 | 3.0 (XXHDPI) | 360 x 640 |
Convert to DIP for Android Devices
Follow the steps below to convert a device's screen resolution from physical pixels to device-independent pixels:
- Verify that you know the screen resolution (in physical pixels) and the DPI measurement for the device. This information can usually be found in the device specifications.
- Use the following conversion formula for Android devices:
px = DIP * (DPI / 160)
For example, using the measurements for the sample device, above:
px = 1 DIP * (424 DPI / 160)
- Find the result.
In the example, one DIP on a 424 DPI device is equivalent to 2.65 physical pixels.
- Round this result to the nearest half or whole number to get the density of the device.
For the sample device, the density is 3.0.
- Divide the screen resolution measurements by the density to convert the measurements to device-independent pixels.
For example, 1080 becomes 360 and 1920 becomes 640. The sample device's screen resolution is 360 x 640 device-independent pixels.
Convert to DIP for iOS Devices
iOS devices also utilize device-independent pixels, but you may see them referred to as points. Remember that points and DIP both refer to device-independent pixels. For iOS devices, follow the same procedure as above using the following conversion formula:
px = points * (DPI / 163)