我本來(lái)一直在開(kāi)發(fā)PC端的網(wǎng)頁(yè)的，但是看到很多招聘都要求要有移動(dòng)端開(kāi)發(fā)的經(jīng)驗(yàn)，所以開(kāi)始學(xué)習(xí)一下！

先搞清楚兩個(gè)概念，移動(dòng)端web開(kāi)發(fā)，web app開(kāi)發(fā)

1、 移動(dòng)web開(kāi)發(fā)（pc端的頁(yè)面用手機(jī)瀏覽器打開(kāi)）

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

2、 web app開(kāi)發(fā)（web應(yīng)用程序）

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

一、meta標(biāo)簽

html代碼中最關(guān)鍵的就是meta標(biāo)簽設(shè)置，開(kāi)發(fā)移動(dòng)端頁(yè)面首先一定要設(shè)置viewport （可視區(qū)域）

device-width - 設(shè)備的寬度

initial-scale - 初始的縮放比例

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

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

user-scalable - 用戶是否可以手動(dòng)縮放

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

下面延伸一下<meta>標(biāo)簽的作用

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

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

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

也許你認(rèn)為這些代碼可有可無(wú)。其實(shí)如果你能夠用好meta標(biāo)簽，會(huì)給你帶來(lái)意想不到的效果，例如加入關(guān)鍵字會(huì)自動(dòng)被大型搜索網(wǎng)站自動(dòng)搜集；可以設(shè)定頁(yè)面格式及刷新等等。

name屬性

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

（1）Keywords（關(guān)鍵字）

說(shuō)明：keywords用來(lái)告訴搜索引擎你網(wǎng)頁(yè)的關(guān)鍵字是什么。提高網(wǎng)站的訪問(wèn)量

舉例：

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

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

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

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

①網(wǎng)頁(yè)描述為自然語(yǔ)言而不是羅列關(guān)鍵詞（與keywords設(shè)計(jì)正好相反）；

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

③網(wǎng)頁(yè)描述中含有有效關(guān)鍵詞；

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

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

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

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

說(shuō)明：robots用來(lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。

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

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

（4）author（作者）

說(shuō)明：標(biāo)注網(wǎng)頁(yè)的作者

http-equiv屬性

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

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

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

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

（2）content-Language（當(dāng)瀏覽者訪問(wèn)你的網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)自動(dòng)識(shí)別并設(shè)置網(wǎng)頁(yè)中的語(yǔ)言）

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

（3）Expires（期限）

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

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

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

（4）Pragma(cache模式）

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

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

注意：這樣設(shè)定，訪問(wèn)者將無(wú)法脫機(jī)瀏覽。

（5）Refresh（刷新）

說(shuō)明：自動(dòng)刷新并轉(zhuǎn)到新頁(yè)面。

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

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

（6）Set-Cookie(cookie設(shè)定）

說(shuō)明：如果網(wǎng)頁(yè)過(guò)期，那么存盤(pán)的cookie將被刪除。

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

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

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

說(shuō)明：強(qiáng)制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯示。

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

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