Please note: (all the following discussion content and specifications set the viewport to content=”width=device-width”) That is, our H5 page front-end code 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” />
1. A pixel has no width or height (don't be fooled by the pixel grid in Photoshop), it just represents a sampled color value.
2. When any picture is stored in the storage disk as data information, only the number of pixels in width and height is meaningful. The ppi at this time has no meaning for the picture, and it cannot describe how many inches wide or how many inches the picture has. Height, and ppi has meaning only after it is printed, and it can be printed to describe how high and how wide the picture is.
3. When designing prototypes when making H5 pages, the prototype draft suggested by the product manager recommends that the screen width be 320px . This size is used for the convenience of browsing (the screen width of many mobile phones now reaches 1440px, and it is obviously unrealistic to use this size to simulate) , Second, the screen width of the iPhone 5s is smaller, and the screen width should be backward compatible when the content layout is made.
4. When making the design draft , the designer should double all the dimensions on the prototype draft . In this way, the design draft can be previewed on mobile devices to ensure clarity. When slicing the front end , according to the current popular practice, you can directly use the size on the prototype draft, that is , 1/2 of the design draft .
5. Under normal circumstances, it is the most secure size to make the H5 page design draft into 640x1136px , and add a safety line at the height of 812px , and the important content is above this line (some articles on the Internet say that the safety line is at 960px, I personally think it is not too much precise). This ensures both a clear display on mobile devices and a minimum size of footage. It is recommended to use Tencent Zhitu (http://zhitu.tencent.com/) for the front-end siege lion. The image compression here is quite easy to use, which can save users a lot of bandwidth.