[Original] Why choose iPhone 5 Resolution as H5 visual draft size, iPhone 5h5

[Original] Why choose iPhone 5 Resolution as H5 visual draft size, iPhone 5h5

It's another 520 million online Valentine's Day in a year, but it's raining heavily in Shenzhen. This rain can only be the tears of a bachelor. For me, this day is of special significance and I miss my father, secondly, I can barely express my love for my wife. so, the image width in this article is designed in 520 pixels.

Back to the topic, H5 pages (Sliding Screen pages) that are frequently seen in the circle of friends, in addition to cool animation effects, when you are careful, you will find that some H5 pages are well adapted to different mobile devices. The page elements are adapted to your device screen and complete information is displayed, for example, the content of the page is automatically adapted under different screen resolutions of iPhone 6 and iPhone 4. the lower half of the lead is hidden outside the screen in the iPhone 4 narrow screen mobile phone, but the guidance information is completely displayed on the page.

So does responsive design require the designer to provide multiple sets of design drafts? For example, a wide-screen mobile phone (iPhone 6) and a narrow-screen mobile phone (iPhone 4) have their own set.

I believe many people have no answer, because it will increase the workload of design and front-end. In actual work, design H5 pages, many professional designers provide two or even three sets of sizes to front-end colleagues. The following is suco's "mobile-end brand marketing elements-quick and accurate".

The benefits are obvious, reducing the front-end construction cost and communication cost, and we would like to salute the designers here.

No matter whether one or more sets of visual drafts are designed, they are always designed based on one of the sizes. Since the transfer to mobile development, many colleagues have been asking:What size is the H5 visual draft designed??

Two years ago, most of the visual drafts we obtained were the sizes of 960x640 for the iPhone 4 Resolution. Now, the iPhone 6/6 + has come out. I think I should choose iPhone6 for my generation, however, this article choosesIPhone 5Why? briefly explain my opinions.

The following analysis data is taken from the umeng index in January and has great reference value.

The market proportion of ios devices includes the resolution and market proportion of major models. In addition, the device height and width are calculated and the following data is obtained:

• 5 percentage in ios Market47.4%, The highest percentage in ios
• 4 percentage in ios Market23.10%, Can not be ignored in the narrow screen mobile phone
• Shares of 5, 6, and 6 + in the market61.9%
• The resolution between 5 to 6 and 6 + increases proportionally, and the ratio of height to width is approximately178: 100

For the market share of android devices:

• The device height to width ratio is about178: 100Proportion64.4%

From the above two pieces of data, we can see whether it is ios or android,Device aspect ratio: 178, accounting for more than 100 of the marketIt is not hard to see that the proportion of devices is the mainstream in the current market,Designed from devices with the maximum number of users to forward and backward compatible,So iPhoneThe proportion of the top five and market share can be the first choice for the current H5 visual draft.

Here, the article is also the end, and then throw the question at the beginning of the article: Do visual designers need to design multiple sets of visual drafts? Do I need 2 or 3 + sets?

Coming soon ~

I wish you all a 520 happiness ~