Record some mobile end H5, small program Vision restore problem and method

The front end, especially the mobile side if the visual restore requirements are relatively high. After the functional test and the performance test are complete. UI really is a pixel one pixel for you to pick out where to restore not in place

Previous projects require a reduction of more than 98%. So every to the visual restoration is really very painful, here to record some visual reduction on the different models on some display problems.

• Small program iOS 1rpx display 2px width

This visual problem is really painful. We thought about the iOS unit 1rpx, then Transform:scale (0.5), but it would cause the individual Android models to display particularly fine, so this scheme is deprecated.

The final use of http://www.cnblogs.com/leungUwah/p/8519759.html on a blog post written on the plan, the perfect solution behind

• Clearly set the corresponding font-size size but still a high degree of restoration or not

Workaround: Check that the outermost element has no set font-size:0; cancels gaps between elements

• Small program element height is small when Andro display font bias problem

Workaround: Do not set the line-height:20px for a total of 20px, set the Line-height:1, and then open the other heights with padding, if the display of the icon is preceded by the icon: Inline-block;vertical-align:top;

• The problem of the line height of the digital font and the Chinese is not a height

The solution: This is run out. The number is not Chinese short is not every number is wrapped up alone, this symptom does not cure. UI in the design of the tool when the look and look good is based on a good state number or other display, the front-end to make

And then the show is definitely dynamic.

　　

• Applet icon Image background-image display RPX unit display Edge has a smaller display incomplete problem

WORKAROUND: There are two kinds of 1. If the RPX unit is still used, the icon will be integrated into the sprite map to leave 1-2 pixels of space around the icon. 2. Use PX Unit http://www.cnblogs.com/leungUwah/p/8519759.html or the previous blog post to write the scheme.

　　

• Other

Multi-use flexible layout, which is good for visual restoration can reduce the trouble behind a lot. Another is that I rarely use float, out of the flow of documents to clear the float, or other elements have an impact, there might be some unexpected bug. And there's one.

When you get a visual or UE, you should first want to clear how to layout, of course, you have to according to your needs to show.

All right, so much for the moment. If you encounter later, it will continue to update.

The last day of April, take some time to write blog, record some of their own problems encountered, there is not written in the place to hope that everyone to correct.

Record some mobile end H5, small program Vision restore problem and method