我本來(lái)一直在(zài)開發PC端的(de)網頁的(de)，但是(shì)看到(dào)很多招聘都要(yào / yāo)求要(yào / yāo)有移動端開發的(de)經驗，所以(yǐ)開始學習一下！

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

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

這(zhè)部分跟web前端開發差别不(bù)大(dà)，使用的(de)技術都是(shì)html+css+js。區别爲(wéi / wèi)手機浏覽器是(shì)webkit的(de)天下，pc端是(shì)IE的(de)天 下。手機網頁可以(yǐ)理解成pc網頁的(de)縮小版加一些觸摸特性。因爲(wéi / wèi)是(shì)在(zài)浏覽器中進行的(de)網頁開發，所有最終代碼具有跨系統平台的(de)特性

2、 web app開發（web應用程序）

特指的(de)是(shì)用html5技術開發，之(zhī)所以(yǐ)叫web app是(shì)因爲(wéi / wèi)他(tā)比較接近客戶端應用程序的(de)用戶體驗，可以(yǐ)和(hé / huò)系統深度融合，調用一些隻有客戶端才能調用的(de)功能（比如在(zài)移動設備上(shàng)利用html5開發出(chū)的(de)網頁可以(yǐ)訪問電話、攝像頭等本地(dì / de)功能）.

一、meta标簽

html代碼中最關鍵的(de)就(jiù)是(shì)meta标簽設置，開發移動端頁面首先一定要(yào / yāo)設置viewport （可視區域）

device-width - 設備的(de)寬度

initial-scale - 初始的(de)縮放比例

minimum-scale - 允許用戶縮放到(dào)的(de)最小比例

maximum-scale - 允許用戶縮放到(dào)的(de)最大(dà)比例

user-scalable - 用戶是(shì)否可以(yǐ)手動縮放

其次是(shì)一些輔助優化功能，常用的(de)有如下meta标簽：

下面延伸一下<meta>标簽的(de)作用

meta标簽是(shì)元素可提供相關頁面的(de)元信息，比如針對搜索引擎和(hé / huò)更新頻度的(de)描述和(hé / huò)關鍵詞。标簽位于(yú)文檔的(de)頭部，不(bù)包含任何内容。

meta标簽共有兩個(gè)屬性，它們分别是(shì)http-equiv屬性和(hé / huò)name屬性，不(bù)同的(de)屬性又有不(bù)同的(de)參數值，這(zhè)些不(bù)同的(de)參數值就(jiù)實現了(le／liǎo)不(bù)同的(de)網頁功能

<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;" />

也(yě)許你認爲(wéi / wèi)這(zhè)些代碼可有可無。其實如果你能夠用好meta标簽，會給你帶來(lái)意想不(bù)到(dào)的(de)效果，例如加入關鍵字會自動被大(dà)型搜索網站自動搜集；可以(yǐ)設定頁面格式及刷新等等。

name屬性

主要(yào / yāo)有以(yǐ)下幾種參數：

（1）Keywords（關鍵字）

說(shuō)明：keywords用來(lái)告訴搜索引擎你網頁的(de)關鍵字是(shì)什麽。提高網站的(de)訪問量

舉例：

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

（2）description（網站内容描述）

說(shuō)明：description用來(lái)告訴搜索引擎你的(de)網站主要(yào / yāo)内容。

網站内容描述（description）的(de)設計要(yào / yāo)點：

①網頁描述爲(wéi / wèi)自然語言而(ér)不(bù)是(shì)羅列關鍵詞（與keywords設計正好相反）；

②通常爲(wéi / wèi)網頁内容的(de)摘要(yào / yāo)信息，也(yě)就(jiù)是(shì)希望搜索引擎在(zài)檢索結果中展示的(de)摘要(yào / yāo)信息；

③網頁描述中含有有效關鍵詞；

④網頁描述内容與網頁标題内容，主題内容有高度相關性；

⑤網頁描述的(de)文字不(bù)必太多，一般不(bù)超過搜索引擎檢索結果摘要(yào / yāo)信息的(de)最多字數（通常在(zài)100中文字之(zhī)内，不(bù)同搜索引擎略有差異）。

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

（3）robots（機器人(rén)向導）

說(shuō)明：robots用來(lái)告訴搜索機器人(rén)哪些頁面需要(yào / yāo)索引，哪些頁面不(bù)需要(yào / yāo)索引。

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

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

（4）author（作者）

說(shuō)明：标注網頁的(de)作者

http-equiv屬性

相當于(yú)http的(de)文件頭作用，它可以(yǐ)向浏覽器傳回一些有用的(de)信息，以(yǐ)幫助正确和(hé / huò)精确地(dì / de)顯示網頁内容，與之(zhī)對應的(de)屬性值爲(wéi / wèi)content，content中的(de)内容其實就(jiù)是(shì)各個(gè)參數的(de)變量值

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

說(shuō)明：設定頁面使用的(de)字符集。

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

（2）content-Language（當浏覽者訪問你的(de)網頁時(shí)，浏覽器會自動識别并設置網頁中的(de)語言）

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

（3）Expires（期限）

說(shuō)明：可以(yǐ)用于(yú)設定網頁的(de)到(dào)期時(shí)間。一旦網頁過期，必須到(dào)服務器上(shàng)重新傳輸。

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

注意：必須使用GMT的(de)時(shí)間格式。

（4）Pragma(cache模式）

說(shuō)明：禁止浏覽器從本地(dì / de)計算機的(de)緩存中訪問頁面内容。

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

注意：這(zhè)樣設定，訪問者将無法脫機浏覽。

（5）Refresh（刷新）

說(shuō)明：自動刷新并轉到(dào)新頁面。

用法：<meta http-equiv="Refresh" content="2;URL">；（注意後面的(de)分号，分别在(zài)秒數的(de)前面和(hé / huò)網址的(de)後面，URL可爲(wéi / wèi)空）

注意：其中的(de)2是(shì)指停留2秒鍾後自動刷新到(dào)URL網址。

（6）Set-Cookie(cookie設定）

說(shuō)明：如果網頁過期，那麽存盤的(de)cookie将被删除。

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

注意：必須使用GMT的(de)時(shí)間格式。

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

說(shuō)明：強制頁面在(zài)當前窗口以(yǐ)獨立頁面顯示。

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

注意：用來(lái)防止别人(rén)在(zài)框架裏調用自己的(de)頁面。