That's the thing about moving.

Looking back, the mobile Web page code writing is far less complex than I thought (probably because I did this project for the sake of simplicity). But in terms of getting started, it's actually pretty simple, and I've summed him up in a few ways: special META tags/hundred percent layout width/rem set font size/CSS3 use.
OK, let's get started, here is the humble opinion of the mobile web novice, the birds, please detour, if you are grateful.

1. Special meta tags;
Since the browsers for our smartphones (ios,android) are based on the WebKit kernel, there are some special meta tags for webkit that play an important role in developing the mobile Web:
<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name= "viewport"/>

Forces the width of the document to remain at 1:1 of the width of the device, and the maximum width of the document is 1.0, and does not allow the user to click on the screen to enlarge;
<meta content= "yes" name= "apple-mobile-web-app-capable"/>

The safari private meta tag in the iphone device, which says: Allow full screen mode to browse;
<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style"/>

The iphone's private label, which specifies the style of the iphone's status bar on the top of safari;
<meta content= "Telephone=no" name= "Format-detection"/>

Tells the device to ignore numbers in the page as phone numbers.
<meta content= "Email=no" name= "Format-detection"/>

The email address on the page is not automatically recognized in Android, and the email address is not automatically recognized in iOS;

(Note: Since WebKit's browser is good for HTML5, it is best to use the HTML5 declaration method when declaring the header.) Of course if you are accustomed to HTML4, then I can only tell you, or to learn HTML5 in the next look! ）

2. The layout of the hundred percent;
After I got the design of the designer's 640px (design draft in proportion to IPhone4), I set the height/size of each module strictly according to the design draft. The next sad thing happened, the page written out on the mobile phone shows an unusually large. I'm a fool, this is the case! Consulting professionals later learned that although the resolution of the iphone4 is 960x640px, its screen pixel density is relatively high, its actual size should be halved. So when writing code, all height/size is 1/2 of the design draft. Then say percent layout:
When you do a mobile Web page, we use a percent layout to achieve the adaptive screen width. With PC-side web page development experience, students will know that the elements of the box model (unclear students can go to W3school on the search).
So I want an element 100% display, and must have a fixed padding-left/padding-right, and a 1px border, how to do?
element{
width:100%;
padding-left:10px;
BORDER:1PX solid blue;
}


So writing code will inevitably result in a horizontal scroll bar, swollen? Believe that the problem is to be solved. At this time the great CSS3 for us to provide the Box-sizing property, the specific explanation of this property do not repeat (want to learn more about the students can go to W3school to see, to know that their hands will be easier to remember). Let's look at how to solve the above problem:
element{
width:100%;
padding-left:10px;
Box-sizing:border-box;
-webkit-box-sizing:border-box;
BORDER:1PX solid blue;
}

OK, the problem is solved!

3. rem setting font size;
Here, let's take a look at the units in the CSS: Px/em/rem (following from 0101 Garden)
PX: CSS is the most basic unit of length, with PX do not have any problem unit, you can make the page according to the precise presentation of the routine. However, (hear but is not suddenly some discomfort, like every time the development of students shout me, my subconscious will tell myself, bad and out of the bug!!) If the entire PX layout will hide a problem, that is, when the user and Ctrl roll the page (plainly, ctrl+,ctrl-), you will find that the page structure produced unpredictable confusion, so there are bricks advocate using em instead of PX.
Em:em is the relative unit, and EM relative to the reference point is the browser font size (the browser default font is 16PX), so 1em default equals 16px. So 14px=0.875em; The formula is 14/16=0.875em. If you write with EM, you can solve the problem of page confusion caused by ctrl+,ctrl-.

However, the problem again, EM accurate is relative to the parent node's font size to calculate, if you define the font size then relative to the size of their own to calculate, for example, as follows:
HTML {font-size:100%;}
. box-0 {
Height:1em; /* height equals 16px at this time */
}
. box-1 {
Font-size:0.625em; /* At this point the base font size is changed to 16*0.625=10px */
Height:1em; /* At this time the actual height equals 10px */
}

See, 1em is not a fixed value, plus math is taught by P.E. teachers, this is not self-inflicted. It doesn't matter, CSS3 to introduce a new unit for us is REM can solve this problem.

Rem:rem and EM are also a relative unit, in order to facilitate understanding, we understand rem as root em, as the name implies REM only relative to node
4. Use of CSS3;
How to do such a large mobile Web page can be less CSS3. But usually CSS3 use less, here note a few I use in this project CSS3 attribute. More in-depth parents to learn their own. Similarly, here do not repeat the attributes, put a strong w3school do not, I can only say to you: medicine can not stop AH! ：

A. Rounded corners (this is too common)
element{
BORDER:1PX solid blue;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}


B. Gradients (this is often used when making a button)
element{
Background-image:-moz-linear-gradient (Top, #2288cc, #389de2); /* Firefox */
Background-image:-webkit-gradient (linear, left top, left bottom, color-stop (0, #389de2), Color-stop (1, #2288cc)); /* saf4+, Chrome */
}


C. Remove the transparent layer that appears when you click on a handheld device (typically formatted on the head)
a,button,input{
-webkit-tap-highlight-color:rgba (0,0,0,0);
-webkit-tap-highlight-color:transparent; /* For some androids */
}

When this property is applied, the active property of the link is effective, and the workaround is to run Document.addeventlistener ("Touchstart", function () {}, True) when the page unload; Make the active state available. (Note: Under the Xiaomi System, click the link will still appear red border, if you have a solution, please enlighten, appreciate. ）

D. Change the box model (as already mentioned above)
element{
Box-sizing:border-box;
-webkit-box-sizing:border-box;
}


5. About commissioning;

Well, with the knowledge above, we can write a moving page. But don't be too optimistic, how do we debug it? Do you send a server every time you write a page, and then use your phone to access the test environment! Of course, it does not need to be so troublesome, if the classmate with a PC, you can use a local localhost tool debugging (this time you do not have to do their own, with my own tools.) The usage is simple, put all the pages into a folder, the page is placed in the root directory, the tool is also placed in the directory, the page you want to debug to index.html. Of course, if you have several pages, it is best to make an index page. Start the debugger, use your phone to access your computer's IP, to ensure that the phone uses WiFi and PC network in a Web segment). With the Friends of the Mac on the Internet to find a way to configure the localhost, to open the following this feature can be accessed.

The things on the mobile side (turn)