我本來一直在開發(fā)PC端的網(wǎng)頁的，但是看到很多招聘都要求要有移動端開發(fā)的經(jīng)驗，所以開始學習一下！

先搞清楚兩個概念，移動端web開發(fā)，web app開發(fā)

1、 移動web開發(fā)（pc端的頁面用手機瀏覽器打開）

這部分跟web前端開發(fā)差別不大，使用的技術都是html+css+js。區(qū)別為手機瀏覽器是webkit的天下，pc端是IE的天 下。手機網(wǎng)頁可以理解成pc網(wǎng)頁的縮小版加一些觸摸特性。因為是在瀏覽器中進行的網(wǎng)頁開發(fā)，所有最終代碼具有跨系統(tǒng)平臺的特性

2、 web app開發(fā)（web應用程序）

特指的是用html5技術開發(fā)，之所以叫web app是因為他比較接近客戶端應用程序的用戶體驗，可以和系統(tǒng)深度融合，調(diào)用一些只有客戶端才能調(diào)用的功能（比如在移動設備上利用html5開發(fā)出的網(wǎng)頁可以訪問電話、攝像頭等本地功能）.

一、meta標簽

html代碼中最關鍵的就是meta標簽設置，開發(fā)移動端頁面首先一定要設置viewport （可視區(qū)域）

device-width - 設備的寬度

initial-scale - 初始的縮放比例

minimum-scale - 允許用戶縮放到的最小比例

maximum-scale - 允許用戶縮放到的最大比例

user-scalable - 用戶是否可以手動縮放

其次是一些輔助優(yōu)化功能，常用的有如下meta標簽：

下面延伸一下<meta>標簽的作用

meta標簽是元素可提供相關頁面的元信息，比如針對搜索引擎和更新頻度的描述和關鍵詞。標簽位于文檔的頭部，不包含任何內(nèi)容。

meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no;" />

也許你認為這些代碼可有可無。其實如果你能夠用好meta標簽，會給你帶來意想不到的效果，例如加入關鍵字會自動被大型搜索網(wǎng)站自動搜集；可以設定頁面格式及刷新等等。

name屬性

主要有以下幾種參數(shù)：

（1）Keywords（關鍵字）

說明：keywords用來告訴搜索引擎你網(wǎng)頁的關鍵字是什么。提高網(wǎng)站的訪問量

舉例：

<meta name ="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">

（2）description（網(wǎng)站內(nèi)容描述）

說明：description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。

網(wǎng)站內(nèi)容描述（description）的設計要點：

①網(wǎng)頁描述為自然語言而不是羅列關鍵詞（與keywords設計正好相反）；

②通常為網(wǎng)頁內(nèi)容的摘要信息，也就是希望搜索引擎在檢索結(jié)果中展示的摘要信息；

③網(wǎng)頁描述中含有有效關鍵詞；

④網(wǎng)頁描述內(nèi)容與網(wǎng)頁標題內(nèi)容，主題內(nèi)容有高度相關性；

⑤網(wǎng)頁描述的文字不必太多，一般不超過搜索引擎檢索結(jié)果摘要信息的最多字數(shù)（通常在100中文字之內(nèi)，不同搜索引擎略有差異）。

舉例：<meta name="description" content="This page isabout the meaning of science,education,culture.">

（3）robots（機器人向?qū)?#xff09;

說明：robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。

content的參數(shù)有all,none,index,noindex,follow,nofollow。默認是all。

舉例：<meta name="robots"content="none">

（4）author（作者）

說明：標注網(wǎng)頁的作者

http-equiv屬性

相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值

（1）content-Type（顯示字符集的設定）

說明：設定頁面使用的字符集。

用法：<meta http-equiv="content-Type"content="text/html; charset=gb2312">

（2）content-Language（當瀏覽者訪問你的網(wǎng)頁時，瀏覽器會自動識別并設置網(wǎng)頁中的語言）

用法：<metahttp-equiv="Content-Language" content="zh-cn" />

（3）Expires（期限）

說明：可以用于設定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務器上重新傳輸。

用法：<meta http-equiv="expires"content="Fri,12 Jan 2001 18:18:18 GMT">

注意：必須使用GMT的時間格式。

（4）Pragma(cache模式）

說明：禁止瀏覽器從本地計算機的緩存中訪問頁面內(nèi)容。

用法：<meta http-equiv="Pragma"content="no-cache">

注意：這樣設定，訪問者將無法脫機瀏覽。

（5）Refresh（刷新）

說明：自動刷新并轉(zhuǎn)到新頁面。

用法：<meta http-equiv="Refresh" content="2;URL">；（注意后面的分號，分別在秒數(shù)的前面和網(wǎng)址的后面，URL可為空）

注意：其中的2是指停留2秒鐘后自動刷新到URL網(wǎng)址。

（6）Set-Cookie(cookie設定）

說明：如果網(wǎng)頁過期，那么存盤的cookie將被刪除。

用法：<meta http-equiv="Set-Cookie"content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/">

注意：必須使用GMT的時間格式。

（7）Window-target（顯示窗口的設定）

說明：強制頁面在當前窗口以獨立頁面顯示。

用法：<meta http-equiv="Window-target"content="_top">

注意：用來防止別人在框架里調(diào)用自己的頁面。