Mobile adaptation best Practices (medium)

The previous article talked about some basic concepts: screen density, logical pixels, and so on.

Common Device Dimensions

for a more complete list of data, refer to Google Stats

Description: The IPhone 6 Plus data in the figure looks a bit fishy, 414 x 736 * 3 = 1242 x 2208, while the physical pixels are x 1920, why? In fact, the IPhone 6 Plus renders the image size 1242 x 2208 px, but the screen is only X-px, so the system will compress the rendered graph.

attached: iOS on the Welcome page Dimension Description

From the data in the table, you can see:

1. Although the physical pixels are various, the logical pixels are relatively uniform.

2. The logical pixels are close to each other, and the screen size is also relatively close.

In fact, logical pixels are meant to make the UI behave the same on different screens. That is, the logical pixels of the same unit are the same physical dimensions on different screens. Let's take a picture, a picture wins the preface.

The height of the UI element is 200 logical pixels, on a screen with a magnification of 1, and a height of 400px on a screen with a magnification of 2, but their physical size is the same.

Having said so much, it's time to cut to the chase!

How to Fit

Before doing a lot of bedding, logic pixels, magnification and so on, it is time to show their useful

• Provide the corresponding picture resources for different magnification screens

IOS platform for @2x, @3x

Android platform drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi, etc.

WEB platform, JavaScript requests different images based on magnification

• Use logical pixels as a unit of length for UI elements

Ios:pt, ANDROID:DP, web:px

• Provide different layouts for different sizes of screens

The Android platform supports different layouts depending on size, and other platforms are not very clear. Off-topic: for example, suitable for tablets and mobile phones, most of the domestic applications are a set of layouts, tablet is the mobile phone's enlarged version, perhaps most of the team are tired of the product iteration bar. Google's app is a benchmark for this piece.

Some of the details of each platform must be somewhat different, but the principle is as above.

The next section will say: How to make the designer and the siege lion better work together

Mobile adaptation best Practices (medium)