一步一步構建手機WebApp開發——環境搭建篇

時間  2019-11-07
標籤 一步 構建 手機 webapp 開發 環境 搭建 欄目 無線 简体版
原文   原文鏈接

　　從2007年，喬布斯帶來了第一代Iphone手機，整個移動互聯網發生天翻地覆的變化，也同時證實了喬布斯的一句名言：「再一次改變世界」。javascript

　　在當今的移動互聯網，手機App居多，不少App對移動設備的要求也愈來愈高，固然，土豪就能夠常常更新換代。咱們這羣屌絲只能望梅止渴。爲了解決少部分因爲硬件或者軟件引發的問題，咱們將App遷移到瀏覽器上，也就是人們常說的WebApp，WebApp相對與手機App客戶端有如下優勢：css

　　一、免安裝，一個瀏覽器就能夠搞定。html

　　二、不須要繁忙的迭代更新。html5

　　三、不須要擔憂存儲不足沒法安裝。java

　　四、時刻能夠享受最新的功能。jquery

　　五、輕量級App。css3

　　六、跨平臺git

　　七、...github

　　

　　廢話少說，讓咱們直接進入WebApp構建教程web

第一步：頁面頭部標籤的申明

　　① 聲明文檔，在這裏咱們採用的是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) {
}

 

框架搭建篇就此完畢，下一篇的教程爲：實現手機滑動換屏特效及側滑出菜單特效。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程