Build mobile Web Development step by step--Environment building

Since 2007, Jobs has brought the first iphone, the entire mobile internet has turned upside-down changes, but also to prove that Jobs's famous saying: "Change the world again."

In today's mobile internet, mobile apps are mostly, many apps on mobile devices are increasingly demanding, of course, local tyrants can be constantly upgraded. We can only fancies this group of dicks. In order to solve the problem caused by hardware or software, we migrated the app to the browser, which is often said that the Webapp,webapp relative to the mobile app client has the following advantages:

1, free installation, a browser can be done.

2. There is no need for busy iteration updates.

3, do not need to worry about insufficient storage can not be installed.

4, the time can enjoy the latest features.

5, lightweight app.

6 、...

7 、...

　　

Talk less, let's go straight to WebApp build tutorial

The first step: page Header label declaration

① declaration document, where we are using HTML5 's statement document

<! DOCTYPE html>

　　② Prohibit Browser zoom

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">

　　③ Setting the browser encoding type

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><meta content=" Application/xhtml+xml;charset=utf-8 "http-equiv=" Content-Type "/>

④ clearing the browser cache

<meta http-equiv= "Pragma" content= "No-cache" ><meta http-equiv= "Cache-control" content= "No-cache, "><meta http-equiv=" Expires "content=" Wed, Must-revalidate 1997 08:21:57 GMT ">

⑤iphone phone number is not displayed as a dial-up link

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

　　⑥ios private properties that can be added to the home screen

<meta name= "apple-mobile-web-app-capable" content= "yes"/>

⑦ios private properties, web App support for website open

<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent"/>

For the meta attribute above, there is no understanding of comrades can look at this article: Portal

Step Two: Resolve IE6~IE9 support issues for HTML5 and CSS3

　　① let ie6~8 support CSS3 pseudo class and attribute selector

<!--[If LTE IE 8]>        <script src= "scripts/selectivizr.js" ></script>    <![ Endif]-->

② let IE9 browser support HTML5 tags and media finder (mainly for responsive web development)

<!--[if Lt IE 9]>        <script src= "scripts/css3-mediaqueries.js" ></script>        <script src= " Scripts/html5shiv.js "></script>    <![ Endif]-->

　　

The specific code for the above two steps:

<! DOCTYPE html>

　　② setting phone fonts and some label style issues (COMMON.CSS)

/* Disable the font size of safari in iphone Auto-adjust */html {-webkit-text-size-adjust:none;}  /* Set HTML5 elements to block */article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section {display:block; }/* set Image video and other adaptive adjustments */img {max-width:100%; height:auto; width:auto9;/* IE8 */}.video embed,. Video object,. Video Ifra me {width:100%; height:auto;}

With the above three steps, a basic mobile phone webapp framework is built.

But what's the downside? That's to let the phone support touch events! Here I recommend a JS plugin, hammer.js.

I believe that we are not familiar with the hammer.js, for everyone to introduce a rough:

Hammer.js is an open-source mobile scripting framework that perfectly implements most events developed at the end of the migration, such as: Click, swipe, drag, multi-touch, and more. There is no need to rely on any other framework, and the entire framework is very small and very simple to use. and hammer.js compatibility and extensibility is very good, hammer.js mainly for the touch screen of the 6 major events to monitor. As shown in the following:

Here I do not specifically introduce: for the detailed use of hammer.js, please visit: hammer.js development tutorial

Fourth step: Add a touch screen plugin for your phone: hammer.js

<script type= "Text/javascript" src= "Scripts/hammer.js" ></script>

Such a slightly complete webapp development framework is well-matched, with detailed code:

HTML code

<! DOCTYPE html>
Reset.css
HTML, body, Div, span, applet, object, IFRAME, H1, H2, H3, H4, H5, H6, p, blockquote, Pre, A, ABBR, acronym, address, Big,  Cite, code, Del, DFN, EM, Font, IMG, ins, KBD, Q, S, Samp, small, strike, strong, sub, SUP, TT, VAR, b, U, I, center, DL, DT, DD, OL, UL, Li, FieldSet, form, label, legend, table, Caption, Tbody, TFOOT, THEAD, tr, TH, td {Margin:0; padding: 0; border:0; outline:0; font-size:100%; Vertical-align:baseline; Background:transparent; }body {line-height:1;} OL, ul {list-style:none;} BLOCKQUOTE, q {quotes:none;} Blockquote:before, Blockquote:after, Q:before, q:after {content: '; content:none;} /* Remember to define focus styles! */:focus {outline:0;} /* Remember to highlight inserts somehow! */ins {text-decoration:none;} del {Text-decoration:line-through;} /* Tables still need ' cellspacing= "0" ' in the markup */table {border-collapse:collapse; border-spacing:0;}
  Common.css  
 
/* Disable the font size of safari in iphone Auto-adjust */html {-webkit-text-size-adjust:none;}  /* Set HTML5 elements to block */article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section {display:block; }/* set Image video and other adaptive adjustments */img {max-width:100%; height:auto; width:auto9;/* IE8 */}.video embed,. Video object,. Video Ifra me {width:100%; height:auto;} Body {font:14px/22px "Georgia", Helvetica, Arial, Sans-serif; background: #fff; color: #595959; overflow-y: scroll; over Flow-x: Hidden; *overflow-y: Auto!important; }a {text-decoration:none; cursor:pointer;}. Wrapper {width:100%; padding:0; margin:0;} Li {list-style:none;} a {text-decoration:none; color: #555756;} a:hover {color: #141414; text-decoration:none;} a img {border:none;} A > img {vertical-align:bottom;}. min-height {min-height:0; height:auto; _height:0; overflow:hidden; _overflow:visible;}. Position-absolute {position:absolute;}. position-relative {position:relative;}. Overflow-hidden {Overflow:hidden; }/* *-----------------------------------------* ~ 480 *-----------------------------------------* * @media only SC  Reen and (min-width:320px) and (max-width:480px) {}/* *-----------------------------------------* 321 ~ wider than 321 devices * -----------------------------------------*/@media only screen and (min-width:321px) {}/* *-------------------------- ---------------* ~ 320 devices with a width less than 320 *-----------------------------------------*/@media only screens and (max-width:320px ) {}/* *-----------------------------------------* ~ 480 width less than 480 devices *-----------------------------------------*/@medi A only screen and (max-width:480px) {}/* medium screens (excludes IPad & iPhone) *//* *----------------------------- ------------* 481 ~ 767 wider than 480 and less than 767 of ipad and iphone *-----------------------------------------*/@media only screens and (m in-width:481px) and (max-width:767px) {}/* ipads (portrait and Landscape) *//* *--------------------------------------- --* 768 ~ 1024 wide greater than 480 and less than1024 ipad and iphone *-----------------------------------------*/@media only screen and (min-device-width:768px) and ( MAX-DEVICE-WIDTH:1024PX) {}/* ipads (Landscape) *//* *-----------------------------------------* 768 ~ 1024 wide greater than 480 and less than 1 024 ipad and iphone *-----------------------------------------*/@media only screen and (min-device-width:768px) and ( MAX-DEVICE-WIDTH:1024PX) and (Orientation:landscape) {}/* ipads (Portrait) *//* *------------------------------------ -----* 768 ~ 1024 wider than 480 and less than 1024 ipad and iphone *-----------------------------------------*/@media only screens and (min-de vice-width:768px) and (max-device-width:1024px) and (orientation:portrait) {}/* *----------------------------------- ------* 1444 ~ 1824 width greater than 1444 and less than 1824 devices *-----------------------------------------*/@media only screens and (min-width:1 444PX) and (max-width:1824px) {}/* *-----------------------------------------* 1824 ~ width greater than 1824 devices *------------------- ----------------------*/@media only SCReen and (min-width:1824px) {}/* *-----------------------------------------* 2224 ~ width greater than 2224 devices *---------------------  --------------------*/@media only screens and (min-width:2224px) {}/* iphone 4 and high pixel ratio (1.5+) Devices *//* * -----------------------------------------* iphone4 ~ *-----------------------------------------* * @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {}/* iphone 4 and higher pixel Ratio (Devices) */@media only screens and (-webkit-min-device-pixel-ratio:2), only screen and (Min-device-pixe L-ratio:2) {}
Frame building This is complete, the next tutorial is: To achieve mobile phone sliding screen change effects and slide-out menu effects. 
Build mobile Web Development step by step--Environment building