Mobile Web App Adaptive Design: Understanding PPI/DPI and Viewport Solutions

This article discusses the importance of adaptive solutions for web apps across different mobile devices, particularly for the diverse Android ecosystem with its numerous resolutions and screen sizes.

1. Page Size and DPI

The key concept is understanding PPI (Pixels Per Inch), sometimes called DPI, which indicates the pixel density of a display. Higher PPI means the display can show images at higher density. To calculate PPI, you need to compute the diagonal equivalent pixels of the screen and divide by the diagonal length (the screen size in inches).

2. The Difference Between px and Pixels

The CSS px unit does not have a fixed size on mobile screens - it depends on the device's DPI. Mobile devices automatically scale pages to coordinate the display effect between screen pixels and dimensions. Different density buckets correspond to different default scaling ratios, which is crucial for developers to understand.

For example, iPhone 4 has a DPI of 330, belonging to xhdpi with a default scaling ratio of 2. This means 1 CSS px actually displays 2 physical pixels. A 320px container would fill the screen width because the actual resolution is 960x640 but divided by the scaling factor.

The formula for effective page size is: Page Size = Resolution / DPI

Examples:

IPHONE 4: [640*960]/2 = [320*480]

HTC G11: [480*800]/1.5 = [320*533]

3. Retina Display

Steve Jobs introduced the concept in 2010: when viewing a device at 10-12 inches (25-30cm), the human retina cannot distinguish pixels if the resolution exceeds 300dpi. This is why Apple's high-density screens are called Retina displays.

4. Market Share Analysis

For Apple devices, starting from iPhone 4 and iTouch 4, Retina displays were adopted. Devices below iPhone 4 represent less than 10% of the market.

For Android, hdpi accounts for about half the market, while xhdpi and mdpi each account for about 25%. ldpi can be ignored.

5. Solution: Using Viewport for 1:1 Output

The recommended viewport meta tag:

<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi, initial-scale=0.5"/>

The key attribute is target-densitydpi, which changes the device's default scaling. The default is medium-dpi. By explicitly setting target-densitydpi=device-dpi, the device renders the page at true DPI (1 CSS px = 1 physical pixel).

However, iOS does not support target-densitydpi, so we use initial-scale=0.5 to shrink the page on iPhones. For Retina iPhones, the page becomes xhdpi [960*640], while older iPhones scale from [480*320] to [960*640] - layout remains unchanged but image traffic may be wasted. Other Android devices won't scale.

You can use window.devicePixelRatio to get the current device's default scaling ratio (not effective on iOS 5 and below).

6. Layout Design

Ideally, different designs for different resolutions would be optimal but costly. In practice, designing for 960x640 and 800x480 covers 70% of devices in the market. Designers should mark which areas are adaptive width and which are fixed width.

For text, considering modern high-resolution devices, font sizes between 24px-50px work best. For images and assets, original sizes can be used without downscaling and will display clearly.