Shulou(Shulou.com)06/03 Report--

This article focuses on "what are the WEBAPP development skills", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "what are the WEBAPP development skills"?

1. To develop web responsively, that is, the page must be self-adaptive screen size and can use fluid layout, such as the previous article (adaptive width layout). Other specific minor problems can be solved by media query (let IE support CSS3 Media Query to implement responsive Web design and CSS3 Media Queries)

2. Because most mobile phones are advanced browsers, they can be developed using html5+css3

3. Use meta tags reasonably and flexibly, as follows

The code is as follows:

The first meta tag says: force the width of the document to be kept at 1:1 to the width of the device, and the maximum width ratio of the document is 1.0, and users are not allowed to click on the screen to enlarge and browse.

The second meta tag is the safari private meta tag in the iphone device, which says: allow full-screen browsing

The third meta tag, which is also private to iphone, specifies the style of the status bar at the top of the safari in the iphone

The fourth meta tag says: tell the device to ignore recognizing the digits on the page as phone numbers

For examples, see: examples of commonly used meta tags

4. Be sure to pay attention to the size of the link, because most of them are touch-screen phones, so that users can easily click on the tag (I have seen the article before, but now I can't find the source, it seems to be the smallest 42px*42px):

The size of the operation object is in line with the operation of the finger, and the size setting specification of the button:

The distance between the clicks of the index finger is about 7: 7 mm, the distance between 1mm

Thumb click on the 8'8 mm,2mm spacing. The currently recommended value is 9mm size, and the minimum value should not be less than 7mm.

Of course, some important actions, or frequently clicked areas can be set slightly larger.

5. To do a good job of elegant degradation (smooth degradation), use less JS, pictures, and the page can also reflect the value when you want users to prohibit downloading JS and pictures (because many APP defaults to 3G and does not automatically download pictures and other resources).

6. For image processing, as long as you set the width to make the picture self-adaptive and prevent the picture from being deformed, of course, when the resolution of compatible devices varies greatly, you need to use media queries to load different images according to the resolution (the same one needs to be set to several different specifications). One is to prevent small resolution devices from loading large pictures and wasting traffic. The second is to prevent the blurring of images caused by large resolution devices loading small pictures.

7. When the resolution is too small and the normal display module is too crowded, you can use media queries to show or hide the module according to the resolution, such as 768px showing 2-column layout, 320px displaying 1-column layout and so on.

The code is as follows:

/ * Large desktop * /

@ media (min-width: 1200px) {.}

/ * Portrait tablet to landscape and desktop * /

Media (min-width: 768px) and (max-width: 979px) {.}

/ * Landscape phone to portrait tablet * /

@ media (max-width: 767px) {.}

/ * Landscape phones and down * /

@ media (max-width: 480px) {.}

8. Of course, you can also judge that different terminals can jump to different URL. For more information, please see: mobile devices such as mobile phones and tablets adapt to the javascript of hopping URL.

9. There are many and chaotic mobile browsers, and the default processing method of the mobile phone system is also different, so the compatibility problem is no simpler than that of the PC version, so it is necessary to summarize the commonly used processing methods, such as-webkit-tap-highlight-color:rgba, / * disable link highlighting * /-webkit-touch-callout:none;/* prohibit link long press pop-up option menu * /, and so on.

10. For the mobile end of the mobile phone tablet, traffic is very important, so the naming of class and id in webapp should be broken as far as possible, such as hd in the head, bd in the middle, ft at the bottom, etc. (this recommendation is to be determined, because it is convenient for later maintenance.)

At this point, I believe you have a deeper understanding of "what are the WEBAPP development skills?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.