標籤：
從2007年，喬布斯帶來了第一代Iphone手機，整個移動互連網發生天翻地覆的變化，也同時證明了喬布斯的一句名言：“再一次改變世界”。
在當今的移動互連網，手機App居多，很多App對行動裝置的要求也越來越高，當然，土豪就可以經常更新換代。我們這群屌絲只能望梅止渴。為瞭解決少部分由於硬體或者軟體引起的問題，我們將App遷移到瀏覽器上，也就是人們常說的WebApp，WebApp相對與手機App用戶端有以下優點：
1、免安裝，一個瀏覽器就可以搞定。
2、不需要繁忙的迭代更新。
3、不需要擔心儲存不足無法安裝。
4、時刻可以享受最新的功能。
5、輕量級App。
6、...
7、...
廢話少說，讓我們直接進入WebApp構建教程
第一步：頁面頭部標籤的申明
① 聲明文檔，在這裡我們採用的是Html5的申明文檔
<!DOCTYPE html>
② 禁止瀏覽器縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
③ 設定瀏覽器編碼類別型
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />
④ 清除瀏覽器緩衝
<meta http-equiv="pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache, must-revalidate"><meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
⑤ iPhone 手機上設定手機號碼不被顯示為撥號連結
<meta content="telephone=no, address=no" name="format-detection" />
⑥ IOS私人屬性，可以添加到主畫面
<meta name="apple-mobile-web-app-capable" content="yes" />
⑦ IOS私人屬性，網站開啟對 web app 程式的支援
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
對於上面的meta屬性，有不瞭解的同志可以看看這篇文章：傳送門
第二步：解決IE6~IE9對Html5和Css3的支援問題
① 讓IE6~8支援CSS3偽類和屬性選取器
<!--[if lte IE 8]> <script src="scripts/selectivizr.js"></script> <![endif]-->
② 讓IE9一下的瀏覽器支援Html5標籤和媒體查詢器（主要用於響應式網站開發）
<!--[if lt IE 9]> <script src="scripts/css3-mediaqueries.js"></script> <script src="scripts/html5shiv.js"></script> <![endif]-->
上面兩步的具體代碼：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" id="test"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--禁止瀏覽器縮放--> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" /> <!--清除瀏覽器緩衝--> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"> <!--iPhone 手機上設定手機號碼不被顯示為撥號連結）--> <meta content="telephone=no, address=no" name="format-detection" /> <!--IOS私人屬性，可以添加到主畫面--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--螢幕頂部條的顏色--> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <title>手機webApp</title> <!--讓IE8，IE9，支援Html5和Css3--> <!--[if lte IE 8]> <script src="scripts/selectivizr.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="scripts/css3-mediaqueries.js"></script> <script src="scripts/html5shiv.js"></script> <![endif]--></head>
這樣我們就部署好一個簡單WebApp頭部了
第三步：添加重設樣式（reset.css）和解決手機WebApp字型和圖片等標籤問題
① 添加重設樣式，主要為瞭解決瀏覽器部分標籤在各大瀏覽器上顯示的一致問題(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)
/* 禁用iPhone中Safari的字型大小自動調整 */html { -webkit-text-size-adjust: none; }/* 設定HTML5元素為塊 */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }/* 設定圖片視頻等自適應調整 */img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }.video embed, .video object, .video iframe { width: 100%; height: auto; }
通過上面三個步驟，一個基本的手機WebApp架構就構建好了。
但是還缺點什麼呢？那就是讓手機支援觸摸事件！在這裡我推薦一個js外掛程式，hammer.js。
相信大家對hammer.js還不夠熟悉，為大家粗略介紹一下：
hammer.js是一款開源的移動端指令碼架構，他可以完美的實現在移端開發的大多數事件，如：點擊、滑動、拖動、多點觸控等事件。不需要依賴任何其他的架構，並且整個架構非常小，在使用時非常簡單。並且hammer.js的相容性和拓展性非常好，hammer.js主要針對觸屏的6大事件進行監聽。如所示：
在這裡我就不具體介紹：對於hammer.js的詳細用法，請移步：hammer.js開發教程
第四步：為手機添加觸屏外掛程式：hammer.js
<script type="text/javascript" src="scripts/hammer.js"></script>
這樣一個稍微完整的WebApp開發架構就搭配好了，詳細代碼：
HTML代碼
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--禁止瀏覽器縮放--> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" /> <!--清除瀏覽器緩衝--> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"> <!--iPhone 手機上設定手機號碼不被顯示為撥號連結）--> <meta content="telephone=no, address=no" name="format-detection" /> <!--IOS私人屬性，可以添加到主畫面--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--螢幕頂部條的顏色--> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <title>手機webApp</title> <!-- 重設樣式 --> <link type="text/css" href="css/reset.css" rel="stylesheet" /> <!-- 主樣式 --> <link type="text/css" href="css/common.css" rel="stylesheet" /> <!-- Jquery庫 --> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> <!-- 手機觸摸 --> <script type="text/javascript" src="scripts/hammer.js"></script> <!--讓IE8，IE9，支援Html5和Css3--> <!--[if lte IE 8]> <script src="scripts/selectivizr.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="scripts/css3-mediaqueries.js"></script> <script src="scripts/html5shiv.js"></script> <![endif]--></head><body> </body></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
/* 禁用iPhone中Safari的字型大小自動調整 */html { -webkit-text-size-adjust: none; }/* 設定HTML5元素為塊 */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }/* 設定圖片視頻等自適應調整 */img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }.video embed, .video object, .video iframe { width: 100%; height: auto; }body { font: 14px/22px "Georgia", Helvetica, Arial, sans-serif; background: #fff; color: #595959; overflow-y: scroll; overflow-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; }/* * ----------------------------------------- * 320 ~ 480 * ----------------------------------------- */@media only screen and (min-width: 320px) and (max-width: 480px) {}/* * ----------------------------------------- * 321 ~ 寬大於321的裝置 * ----------------------------------------- */@media only screen and (min-width: 321px) {}/* * ----------------------------------------- * ~ 320 寬小於320的裝置 * ----------------------------------------- */@media only screen and (max-width: 320px) {}/* * ----------------------------------------- * ~ 480 寬小於480的裝置 * ----------------------------------------- */@media only screen and (max-width: 480px) {}/* medium screens (excludes iPad & iPhone) *//* * ----------------------------------------- * 481 ~ 767 寬大於480且小於767的iPad和iPhone * ----------------------------------------- */@media only screen and (min-width: 481px) and (max-width: 767px) {}/* ipads (portrait and landscape) *//* * ----------------------------------------- * 768 ~ 1024 寬大於480且小於1024的iPad和iPhone * ----------------------------------------- */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}/* ipads (landscape) *//* * ----------------------------------------- * 768 ~ 1024 寬大於480且小於1024的iPad和iPhone * ----------------------------------------- */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}/* ipads (portrait) *//* * ----------------------------------------- * 768 ~ 1024 寬大於480且小於1024的iPad和iPhone * ----------------------------------------- */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}/* * ----------------------------------------- * 1444 ~ 1824 寬大於1444且小於1824的裝置 * ----------------------------------------- */@media only screen and (min-width: 1444px) and (max-width: 1824px) {}/* * ----------------------------------------- * 1824 ~ 寬大於1824的裝置 * ----------------------------------------- */@media only screen and (min-width: 1824px) {}/* * ----------------------------------------- * 2224 ~ 寬大於2224的裝置 * ----------------------------------------- */@media only screen 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 (2+) devices (retina) */@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {}
架構搭建篇就此完畢，下一篇的教程為：實現手機滑動換屏特效及側滑出菜單特效。
一步一步構建手機Web開發——環境搭建篇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
