Mobile Web-Learning Summary

Objective:

Always want to do a mobile end of the periodic learning summary, but work too busy always overtime. Now finally can take a little time to write a write, to know all write down, so even forget, also can quickly think up, not too witty ah, haha ha!

First, mobile page common sense

1. Common operating systems: Android, IOS, Firefox, OS

2. Using kernel: WebKit (Android, IOS), Greasemonkey (Firefox, OS)

3. On the mobile side, use gesture actions instead of mouse input/output events

4. Be sure to use responsive layouts to design mobile pages

5. Replace the traditional Dom animation with CSS3 animations (CSS3 animations can be rendered using the GPU of the mobile device)

6. Mobile development, to use a lightweight framework and library (everything in order to fast!) No faster! Faster! You can also save user traffic)

7. Use Canvas instead of the image tag (because image will get you stuck on the cock machine)! To! Burst! ）

8. reduce the number of requests (let your page load speed fly up!) Lower back pressure, hello I am also good ! )

9. Reasonable use of gradients, fillets, shadows (not too much, cock silk machine incompatible t.t)

Second, the mobile side to focus on the head header tag

1.<! DOCTYPE Html> tells the browser that the document type is HTML5 and is not case sensitive

2.<meta charset= "UTF-8"/> Declares the encoding format used by the document

3.SEO Optimization:

<title> title </title> define title for easy search

<meta name= "keywords" content= "mobile home"/> Define keywords to facilitate search engines

<meta name= "description" content= "This is the soul dancing's personal homepage, welcome to visit"/> Definition page description content, convenient search engine search

<meta name= "Robots" content= "Index,follow"/> Define the way the Web page is indexed, set the site content is open

Set to all: The file will be retrieved and the link on the page can be queried;

Set to None: The file will not be retrieved, and the link on the page cannot be queried;

Set to index: The file will be retrieved;

Set to follow: links on the page can be queried;

Set to NOINDEX: The file will not be retrieved, but the link on the page can be queried;

Set to Nofollow: The file will not be retrieved and the link on the page can be queried.

<meta name= "Author" content= "Soul Dancing"/> Define Web page author, convenient search engine

4.<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/ > for different mobile devices, the resolution physical size is not the same, there will be some scaling, in order to show the same effect is set viewport

Width: wide, width=device-width

Height: High, Height=device-height

Initial-scale: Initial zoom ratio, initial-scale=1.0

Maximum-scale: Maximum Scaling, maximum-scale=1.0

User-scalable: Whether to allow user scaling, user-scalable=yes/no

5. Prohibit digital auto-recognition as phone, prohibit auto-forwarding address and mail as link

<meta content= "Telephone=no" name= "Format-detection" >

<meta content= "Address=no" name= "Format-detection" >

6. Support Open content Agreement, make your webpage become "rich media object", support share to other social websites, such as Facebook, everyone, etc.

<meta property=og:title content= "" >

<meta property=og:description content= "" >

<meta Property=og:url content=http://m.baidu.com>

<meta property=og:content content= "" >

7.IOS Equipment

<meta name= "apple-mobile-web-app-capable" content= "yes"/> Enable WebApp full screen mode

<meta name= "Apple-mobile-web-app-title" content= "Soul dancing"/> When adding a page to the desktop, set the title

<link rel= "apple-touch-icon-precomposed" href= "Images/57x57.png"/> The webapp Essentials for iOS!

Rel: The picture is automatically processed into rounded corners and highlights, apple-touch-icon-precomposed means no automatic add effect, direct display of the original

Third, mobile page icon use recommended:

1.SVG implementation: Vector icons, adaptive window size. The following link is Ali Vector Library, a huge amount of icons waiting for you to pick ~

Http://iconfont.cn/repositories

2.CSS3 implementation: Pure CSS3 Implementation of the icon, more lightweight, more convenient. Seriously recommended!

http://saeedalipoor.github.io/icono/

Four, mobile best frame Recommendation

Requirejs: The smallest JavaScript loading framework that defines JavaScript modules.

Zepto.js: Using the same method as jquery, the lightweight framework can be thought of as a mobile lite version of jquery.

Five, small tricks

1. You can block the shadow that appears when you click on an element, often used for the parent node with the event proxy

-webkit-tap-highlight-color:reba (255,255,255,0); 2. Use Flex to stretch the layout 3. Turn on the numeric keypad <input type= "Tel" > 4. Hide the Address bar settimeout (function () {Window.scrollto (0,1);},0); 5. Use tap Fastclick to resolve the click Delay problem to prevent click through 6. Toggle <style media= "All and Orienttation:poortrait" type= "text/css" > Vertical screen </style> <style media= "All and (Orienttation:landscape)" type= "text/css" > Flat screen </style>

Content continues to update in ...

If there is a wrong place or a better way to use, I hope you can comment in the comments area, let us make progress together! Write bad, Beg light spray ~ ~

Mobile Web-Learning Summary