Embedded webview page for iOS

Embedded webview page creation experience in IOS

 

Because IOS Embedded pages are implemented at work and will be encountered more and more in the future, I plan to summarize this experience.

 

Do not cut text into a graph

 

I have seen some colleagues cut the text into a regular graph and a @ 2x graph when cutting the graph. This is actually not good because:

1. The fonts in the design may be different from the actual fonts in IOS. When the two appear on the same screen, they will be very illegal. For example, if the text uses the IOS font, the text in the button behind it is,...
2. More importantly, in 99% cases, the text will be blurred. The system's rendering of text is more smooth and intelligent than the rendering of images, and the performance is much better. Try to use fonts.
3. Public images are supported, with fewer images and smaller app sizes.

Do not splice css3 with images

 

It also depends on othersCodeAs shown in, an iOS button with a triangle + rounded corner uses the image + css3. At this time, it is easy to see a difference between fuzzy and clear on the Retina screen, in addition, the RGB color in the image is different from the RGB color written by CSS.

 

Start the design draft with @ 2X as the benchmark

 

When creating a design draft with the width of @ 2x, that is, 640px, pay attention to the even number of lines. That is to say, a 1px line should be changed to 2px.

Two styles can be written together with cssgaga

 

Use the @ 2X-> 2x graph function of cssgaga to automatically generate a 2x graph, write a reference to a 2x graph in the code, and finally cssgaga automatically generate a media query code for @ 2x graph, very convenient.

Use mobile-end proprietary Reset

 

For pages maintained on remote servers, reduce the size of CSS code and the complexity of DOM nodes as much as possible.

 

Use less CSS attributes with performance problems

 

From: http://yuguo.us/weblog/mobile-slice-font/