Mobile "Banquet know how much

Reprint (http://adt.aicai.com/index.php/archives/179/)

The project has been a long time, not like other enterprises, can have a project team to complete, basically is a blind attempt, sometimes web, sometimes web App. Stupefied over this period of time, do not know what they are busy. Always ask others to summarize, let others learn to summarize, also should summarize for themselves. Also for better sharing of knowledge between teams. How to develop mobile end with how to serve the same, serving there are rules, first cold after hot, before the point of the dish, first salty after the sweet, first fried after burning and so on. Follow certain procedures to get the right grasp. Well, now it's time to serve, Sir and so on ...

Appetizer (appetizer, cold dish)

First, mobile development and PC-side development is different
We all know that the type of mobile phone thousands, also lead to mobile development face screen size is a variety of headaches.
Web: Fixed layouts and resilient layouts
Web App: Responsive layout

Second, debugging Tools
responsive Design view for Firefox: The Firefox browser has a custom design view built in, and you can customize the Design view by Firefox->web Developer--or by pressing Shift + Ctrl + M. Runs more smoothly than network tools, without the need for networking.

Chrome development , Chrome browser also has a emulation,

In addition, is the device debugging, a lot of methods.

1. put the good static page directly in the mobile browser to open the lookup
2. in the local environment, such as PHP environment, LAN access IP Lookup page (have built a blog know)
3. Remote Debugging

A: Android Device Chrome Remote debugging
B:UC Browser Developer Debug

Appetizer Soup

So, the question is, how is mobile development going to begin?
1. About Viewport

• A) Concept: the pixels of the device and the pixels of the CSS (overall, you just need to focus on the pixels of the CSS, these pixels specify how your style is rendered.
  ）
• b) Concept: The function of Windows viewport (viewport) is to control the highest block (block) container:

Here are some of the uses of link, but mobile or web-side, in order to reduce the number of HTTP requests, personal advice is best to use media queries to solve the media can be used as much as possible.

Media queries are as follows:

Head Dish

As the head dish, the general banquet, the head dish is the representative menu. So what about the mobile side?

• Mobile Reset

  ,normalize.css  replaced by Reset's fading out front-end view. Normalize.css, while preserving the identity of the unified style, reset unified style, completely non-readable, the destruction of the original label semantics. For each project's different, each can be based on the NORMALIZE.CSS, according to the current habits of all of us to do some clear 0 and mobile features to add some basic style. The

  will mention a rem here, and it would have been a lot of people to have discussed px,pt,em and other units. REM is a new unit of measurement introduced by CSS3, for example: "em" is relative to its parent element to set the font size, so there is a problem, any element setting, it may be necessary to know the size of his parent element, when we use multiple times, it will bring unpredictable error risk. While REM is relative to the root element

  Browser is set to  62.5%, which is  10px, now  1rem = 10px --for ease of calculation. Then the  font-size:1.6rem is applied on the body , and the page font size is set to  16px.
  html {font-size:62.5%;} body {font-size:1.6rem;/* =16px *}

  The

  can be used with the following code snippet to ensure that there is no problem under the low-end browser

1. html { Font-size: 62.5 %; } /code>
2. body { font -size: 14px Font-size: 1.4rem; } /* =14px/

HTML5+CSS3 on the mobile side

Instead of Dom animation, CSS3 uses the settimeout timer to periodically modify the DOM element's style property.
CSS3 uses the device GPU rendering, using the computing power of the hardware device itself to do some display, the efficiency is much higher than the DOM animation.

2. @keyframes
4. animation-name（动画名称）
6. animation-duration（动画持续时间）
8. animation-delay（延迟执行时间）
10. animation-timing-function（动画形变函数指定）
12. animation-play-state（播放状态指定）
14. animation-iteration-count（无限循环）

As for HTML5, the most used is just those few labels, want to learn more about yourself. Like what:

2. <input type="text" placeholder="规定帮助用户填写输入字段的提示">
4. <input type="number">
6. <input type="date">
8. <input type="range">
10. <input type="color">
12. <input type="email">
14. <input type="search">

JavaScript on the mobile side

Let's start with this kind of framework:
JQuery Mobile,sencha Touch is a huge UI framework.
Zepto.js: Small Frame, class jquery, no superfluous other modules, suitable for the team to expand themselves. (WP not supported)
Not a good team to toss, or recommend the use of JQM, because you will still change to the back of the JQM with Hammer.js to build

Speaking of JavaScript on the mobile side, use gesture actions instead of mouse input/output events. Most developers use encapsulated TAP events instead of click events, so-called tap events consist of Touchstart event + Touchmove + touchend event encapsulation. Let's take a look at some of the PC-side events: (MouseDown, MouseUp, click)

Gesture events on the mobile side:
Touchstart//triggers when finger touches the screen
Touchmove//triggers when a finger that has touched the screen begins to move
Touchend//triggers when the finger leaves the screen
Touchcancel//When a system event, such as a phone, occurs suddenly in the process of sliding the phone. This will cancel out. (Basic rarely used)

Why use the touch event instead of the Click event?
-click event 300ms delay
-Touch events support multi-touch
-Gesture manipulation

Mobile End of the CSS3 custom font (@font-face), the previous article has been introduced. This is not a detailed narration.

Main Course

Some people will ask, how to cut the picture, get the PSD file size is how much, according to what size to make? Or not. So, the mobile page is so small, what is the safe visual size when making the page?

alert(‘width:‘ + window.innerWidth + ‘;height:‘ + window.innerHeight);

At the moment I know the size of the mobile-side viewable area

• IPHONE4/IPHONE4S 320 * 372/320 * 441 (hidden URL and status bar)
• IPHONE5/IPHONE5S 320 * 460/320 * 529 (hidden URL and status bar)
• Note2 360 * 567 (URL and status bar not hidden)
• IPad 3/4 768*928 (not hidden URL and status bar)
• GALAXY SIII 360 * 567 (not hidden URL with status bar)
• Xiaomi 2A 360 *567 (not hidden URL and status bar)
• HTC G10 320 * 460
• Cool Big God615/400568 (not hidden URL and status bar)

Design in accordance with the size of 640 to cut (some people follow the 480 to cut, mainly to consider the waste of image resources), and then the page can be regarded as 320 to write, that is, the font size and image size, in the page when the production of the need to divide by 2.

Why do you want to cut by 640, but use 320 to make it? Because the device resolution too much, the picture is cut large to compress, in the high-resolution device, the picture will not become very small.
In fact, the result is that the mobile phone page, because the above viewport set, the general browser is 320,360,400 such width production page.

1, Meta,link have a
2, CSS Reset also has a
3, as far as possible to use Flexbox layout, try to give up float
4. Image proceed julienne and media enquiry
5, the mobile side JS event use
6, the last mobile phone test perfect
(Simple rough on the grade bar?) ）

Dessert (After dinner chat digestion)

Here I must say is the partial refresh, locates the question.
Position:sticky and position:fixed layout, because there are too many compatible bugs, so will use Iscroll to solve this problem.
How to use, please visit Iscroll official website, here do not elaborate. Because every point here can come to say one or several articles.

box Border Overflow
When we specify a block-level element and define a border for it, the width is set to 100%. According to the box model, one pixel of the left and right border of the element will overflow, causing the horizontal scroll bar to appear, when we can add-webkit-box-sizing:border-box to specify the size of the box to include the width of the border.

iOS digital color style exceeds 9 digits after runaway
This question I don't know how to describe, that is, in iOS, when the number is more than 9 digits, the browser will give the number by default a color, no matter what color you set is not valid.

CSS3 about the use of background-size scaled background images, and how to divide and center with flex and translate.

Mobile "Banquet know how much