Classic Case
  • Website of Tongren Development and Reform Commission
  • Tongren City Science and Technology Innovation Service Platform
  • Tongren Science and Technology Bureau

Mobile full screen (H5 page) design size specifications

Posted: 2018-12-28 16:31 Source: unknown Author: admin Click: Times

When we are working on a mobile H5 web design draft (of course, including WeChat H5 web design), if we have not done a similar mobile design, UI designers and front-end engineers will certainly be entangled. If you are an app designer, you will not be so entangled.

iphone6 material

With so many mobile phone screen sizes, which size should the design draft follow as the standard size. Now that there is a 2K resolution mobile phone screen, should the design draft also be designed with the width and height followed by the maximum resolution. Obviously not.

Please note: (all the discussion content and specifications below set the viewport to content = ”width = device-width”) that is, the front-end code of our H5 page must contain

<Meta content = "initial-scale = 1.0, user-scalable = no, maximum-scale = 1, width = device-width" name = "viewport" />
<Meta content = "telephone = no" name = "format-detection" />

According to the current mobile phones and mobile terminals in the market, their device independent pixels are counted.

Here, School 25 also shared with you a list of all the size specifications of the most popular mobile phones at present: worthy of a closer look at the smart phone size chart.

Only iPhone6 + uses resolution down-frequency processing.

Specifically see the following figure:

H5 design draft size

Interested friends can try different sizes, such as 1x, 2x, 3x. The final test result is. The design draft of H5 is generally designed to be 640x1136px. It not only meets the display requirements, but also reduces the bandwidth required for users to load pictures.

When you can view the H5 page we designed with mobile smartphones of various resolutions, of course, the following situations will also occur, the content is not fully displayed, and even some important content and buttons will be blocked.

First: The background image must be implemented using background-size: cover ;.

Second: When we are planning and designing the layout of the H5 page content, we cannot place important content too low or above, otherwise the content may not be displayed completely when the front-end layout is displayed.

H5-Comparison of display effects in different browsers

By comparison:

Except for the case where the browser is displayed in full screen, almost all cases have a status bar and navigation bar at the top.

iPhone design standards, the independent pixel height of the status bar and navigation bar are 40px and 88px, respectively.

Since the Android system can change the height of the status bar and navigation bar, the default values here can be 48px and 100px (these sizes can be found online).

Then the content of the webpage will be squeezed down into the blind zone (depending on the layout, the viewport may be squeezed out, that is, below the viewport). The maximum value of these two systems is 148 (48 + 100), as shown in Figure 5 below. The design draft should try to ensure that there is no important content under a single page.

H5 page safe height

Figure 5

Then to display important content completely on all screen sizes, we must pay attention to the small-sized mobile phone screens on the market. Most smartphones now have a resolution of 640x960px (iPhone4 resolution), so as long as you put important content in Just above the dead zone in Figure 5 above. The calculated safest height is 812 (960-148 = 812).

In summary, in general, with the popular mobile smart phones in the existing market, the single-page flip (non-extended long page) design draft size is 640x1136, and a safety line (reference line) is set at a height of 812 the important content layout on this safety line.

h5 page authoring tool 70 degrees

The size specifications of the design draft of the mobile H5 page are as follows:

1. Pixels have no width and height (don't be fooled by the pixel grid in Photoshop), it only represents the color value of a sample.

2. When any picture is stored in the storage disk as data information, only the width and height pixels are meaningful. At this time, the ppi has no meaning to the picture, and it cannot describe how many inches the picture has, or Height, and it only has the meaning of ppi after it is printed out. It can describe how tall and wide this picture is when it is printed out.

3. When designing a prototype when making an H5 page, the product manager's prototype draft recommends a screen width of 320px. One of the dimensions is for easy navigation (now many mobile phones have a screen width of 1440px. It is obviously unrealistic to simulate this) ,
Second, the iPhone 5s-standard mobile phone has a smaller screen width, and the screen width should be downward compatible when performing content layout.

4. When making a design draft, the designer should double all the dimensions on the prototype draft. In this way, the design draft is guaranteed to be clear on mobile devices. When slicing the front end, according to the current popular practice, you can directly use the size on the prototype draft, which is 1/2 of the design draft.

5. In general, the H5 page design draft is 640x1136px, which is the most secure size. A safety line is added at the height of 812px. The important content is above this line. accurate). It not only ensures clear display on mobile devices, but also guarantees the minimum size of the material.

Finally, here are 2 recommended tools for image compression.

1, FIG Tencent chi ( )

Smart Map-Picture Intelligent Automatic Optimization Platform, intelligently select the appropriate picture format for your pictures, compress the pictures for you to save bandwidth and optimize the experience, provide you with WebP pictures to make your site tall

2, tinypng ( phone APP design must-picture compression artifact -TinyPNG ), the picture here is still quite easy to use compression, users can save a lot of bandwidth.

Some of these items Source: Thanks for sharing and practice of ZIKO.

    ------ Divider ----------------------------
    ------ Divider ----------------------------