Flexible design and implementation of Taobao Mobile

[[138326]]

Taobao Mobile has been promoting flexible design since mid-2014. What does flexible mean? In fact, flexible is the low-end form and foundation of responsive. For us, the most intuitive feeling is that on an ultra-wide screen, the web page will not be displayed with blank space on both sides. The fluid layout that everyone often talked about in the PC era is actually a kind of flexible design. However, the expression angle of fluid is implementation, and the expression angle of flexible is result. In order to be consistent with the high-end responsive, we use the term flexible here.

Before discussing the solution, we need to understand three key concepts:

Pixel Per Inch (PPI): The number of pixels per inch in the real world determines the display quality of the screen.

Device Pixel Ratio (DPR): The correspondence between physical pixels and logical pixels (px)

Resolution: The number of pixels that the width and height of the screen area occupy

These screen parameters are very important when we decide the font and size units for different screens.

Scenario 1 - Resolution Adaptation

How do you want a banner image to behave when you face different screens?

In this scenario, we mainly need to deal with the resolution adaptation problem. Considering that most web pages are scrolled vertically, under different screen sizes, the behavior of the banner should always fill the screen width and always maintain the aspect ratio.

The most natural idea is to use percentage width, but if we use percentage width, that is, width:100%, we have two ideas to achieve a fixed aspect ratio: one is to use the characteristics of the img tag and only set the width until the image is loaded. This method will cause a lot of re-arrangement, and the non-fixed height will make lazy loading and other functions difficult to implement, so we decisively give up; the second is to use the margin of the before pseudo-element to expand the height. This method is a relatively clean pure CSS implementation, but it does not have any reusability and requires a specific HTML structure, so we have to give up.

Therefore, the most suitable method is to use other relative units. Originally, the most suitable unit is vw, which means viewport width, but this unit has serious compatibility issues, so it has to be abandoned.

***We had to cooperate with js to do it. Hard calculation is also a way, but it also has no reusability. In the end, we chose rem. We used js to set a font-size proportional to the screen width for html, and then used rem as the unit for the width and height of the elements.

This is our current online solution. It is a hack-like usage. Known issues include:

Some Android devices will drop the rem fractional part

Occupies rem units

Not a pure CSS solution

Scenario 2——PPI Adaptation

How would you like a piece of text to behave when you are faced with different screens?

Obviously, we want to see the same text size on the Retina screens of iPhone 3G and iPhone 4, that is, we don't want the text to become smaller on the Retina screen. In addition, we want to see more text on large-screen phones, and most of the font files now come with some dot sizes, usually 16px and 24px, so we don't want to see weird sizes like 13px and 15px.

Such characteristics determine that the rem solution in scenario 1 is not suitable for paragraph text. Therefore, paragraph text should use px as the unit. Considering Retina, we use media query to specify different fonts. Considering the compatibility of DPR, we use width replacement instead:

In another scenario, for some title text, we hope that it will increase with the width of the screen. We can still use rem as the unit. For text larger than 35px (personal intuitive feeling), we don’t need to consider the dot matrix information too much, and the vector information of the font can also be rendered well.

Scenario 3 - DPR Matching

A block with a 1 pixel border on the design, how do you want it to behave when you face different screens?

In this scenario, the requirement is very simple. The designer hopes that this line will be 1 physical pixel on any screen.

Well, of course the answer to this question is not as simple as writing 1px. Under the retina screen, if you write this meta

You will never be able to write something with a width of 1px. In addition, inline elements such as SVG will also be rendered according to logical pixels, and the clarity of the entire page will be discounted.

Therefore, Taobao Mobile uses JS to dynamically write meta tags. The code is similar to this:

 var metaEl = doc.createElement( 'meta' );
 var scale = isRetina ? 0.5 : 1 ;
 metaEl.setAttribute( 'name' , 'viewport' );
 metaEl.setAttribute( 'content' , 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no' );
 if (docEl.firstElementChild) {
 document.documentElement.firstElementChild.appendChild(metaEl);
 } else {
 var wrap = doc.createElement( 'div' );
 wrap.appendChild(metaEl);
 document.write(wrap.innerHTML);
 }

Conclusion

In general, the flexible solution for Taobao Mobile is to use a combination of rem and px units + js to set scale and html fonts.

The contents of these JS can be found in our open source library ml: https://github.com/amfe/lib.flexible.