As a designer of a mobile web site, unless you only design for a specific device, you should often encounter the following problem: How to clearly understand the screen size of the device running the website? This problem has been puzzling designers on mobile devices. For example:
The iPhone is 480 pixels high and 320 pixels wide.
Many Nokia Nseries devices are 240 pixels wide and 320 pixels high.
Many newer devices support views that are reversed in width and height.
The screen sizes of the old Nokia devices (still popular at present) range from 176 × 208 to 352 × 416.
The resolution of the Blackberry screen ranges from 160 × 160 to 324 × 352.
This article is intended to explain how to reasonably design application views for a variety of mobile devices and screen sizes. First, two key issues in small screen design are proposed - screen and pixel size diversity.
Dealing with diversity
Now you may ask yourself, "Do my designs really need to meet all these different screen sizes?" or "Should I design a version for each different device?" It all depends on the commercial requirements of your project. Some designs may only need to meet one screen size - or one device is enough. But if the project requires that your design must support most mainstream devices, then you must find an effective way to handle multiple screen sizes.
Don't panic, things are not so terrible. When designing the mobile web, you can completely assume that the page can scroll up and down - just like the application in the desktop browser. In this way, you can focus on the width of the device screen instead of the height of the screen. Fortunately, the DeviceAtlas Explorer has already provided a large number of screen width statistics of existing devices.
As shown in the chart, most screen widths are mainly concentrated in 128240 and 176 pixels - while the remaining concentrated types: 120130160208 and 220 pixels - are not much different from the most three types. A small part of the screen is 96101320 pixels wide or larger. Devices with a screen width of less than 128 pixels account for only a small proportion, with a total of 469 devices.
Also, less than 5% of devices are wider than 320 pixels. However, this number may increase in the future. It can be seen that small screen (128176, etc.) devices are gradually being replaced by large screen (240+) devices. The chart below shows the relevant analysis.
The resolution of the screen is really important, but there is another point that must also be considered - the physical size of the screen.
'Pixel problem'
Over the years, designers have mainly designed views for large desktop devices. Although the physical sizes of displays may be different, the screen size is basically 1024 × 768 pixels; The common pixel density is 85 ppi (pixels per inch). Recently, however, some changes have taken place in the displayed view:
The resolution of Asus Eee PC 900 netbook is 1024 × 600 pixels, and the pixel density is about 133 ppi.
The resolution of Apple iPhone is 320 × 480 pixels, and the pixel density is 160 ppi.
Nokia's E60 screen has a resolution of 416 × 352 and a pixel density of 240 ppi.
In order to support multiple devices, different pixel densities will bring new problems; The size of pixels will also affect the effect of the whole design.
The following figure shows the display effect of 100 × 100 pixel image on the device with 72144 and 240 ppi pixel density. As the image becomes smaller and smaller, the shape and some details of the image are deformed.
Fortunately, the trend of pursuing high pixel density seems to have passed. At present, there are few devices with more than 200 ppi. This means that you don't really need to support all the pixel densities listed above. However, when designing, you need to remember that you cannot assume that the pixels of all devices are equal. The following points need to be achieved:
Determine the range of pixel density you need to support.
Check your design on a real device in case you ignore some extreme situations.
Use relative units to design and define layout elements, such as EMS or 100%. This will provide a more realistic layout element size and location information.
As manufacturers want to improve the flexibility of the operating system, the 'pixel problem' will receive more and more attention. In fact, Google's Android system has implemented a ">potentially interesting solution" to solve the problem of pixels. Android operating system adopts an abstract 'dp' (independent pixel density) unit, which is based on 160 ppi screen size. In this way, designers can use relative size to define fonts and other interface elements, thus automatically adjusting the view according to the true size of the device.
