Two ways to do screen adaptive HTML5 tools

Nearly one or two years, HTML5 in China is very fire, also out a lot of HTML5 tools and templates. What's the difference between solving a screen-adaptive problem for different H5 tools?

In short, inductive design is the ability to dynamically adapt the device to the width and height of the device when accessed with different devices. For example, using IPhone4, IPhone5, IPhone6, PC, ipad to access the same H5 Web page, can open a suitable for the device of a HTML5 page, without leaving white edge, not deformed.

Because the device resolution and aspect ratio are different, it is almost impossible to design one at a time to accommodate all screens, both mobile and PC-side. There are three reasons:

1. If the proportional scaling, the internal position relationship will change, it will seriously affect the user experience, at the same time, there is no proportional relationship between the device screen, so there will be some screen content can not be displayed or left white edge;

2. If the small screen fit well, placed in a higher screen inside, the two sides will have white edge, or pull the figure, so it will be deformed;

3. If the large screen is fit and placed on a small screen, some parts will be lost.

Therefore, unless the future of AI (AI) development, it is difficult to automatically solve the problem. And the previous site, but also can only separate several layout design, for example, according to the width of the design plate.

How does the current HTML5 tool implement inductive design? The study found that there are two ways, the first is pseudo-inductive design (in the case of easy-to-show), the second is a multi-layout design (take ih5.cn as an example).

Is easy to show the test results, in turn, IPhone4, IPhone5, IPhone6 on the same page display situation. When using IPhone4, the deformation is the most serious, the iPhone5 effect is best, and the iPhone6 is proportional to the edge, and some pixels are not displayed. So you can basically judge this HTML5 tool according to IPhone5 as the standard version. Therefore, this inductive design is called pseudo-"inductive", the design will not leave the white edge, but the need to try to put the content in the middle, it is necessary to design a basemap called "background" for stretching.

[There is a problem]

1. The content should be centered, can not put up and down the edge, for example, put the button to the bottom, the iphone opened after the button is not visible;

2. It is impossible to adapt to PC, pad and other equipment.

This pseudo-inductive design is relatively simple, but can only be used in emergencies, if you want to achieve the perfect fit, you need to adopt multi-layout inductive design.

HTML5 tools that enable Web pages to automatically adapt to multiple screens require different screens for devices of different sizes and resolutions. Ih5.cn uses this multi-layout inductive design, providing the ability to add multiple screens when editing a H5 page, enabling users to design pages that are suitable for display on different screens. Its own principle is to add device control, if the mobile phone side of the light application is generally used in the iphone 4, 5, 6 resolution.

In this way, it is possible to use a URL address that perfectly adapts to multiple screens, including PC side and pad, without any distortion or loss.

Two ways to do screen adaptive HTML5 tools