隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來，人們將更多的時(shí)間和精力放到了移動(dòng)端，移動(dòng)的流量也是迅猛提升。所以僅僅有PC站是遠(yuǎn)遠(yuǎn)不夠的，移動(dòng)適配與移動(dòng)站點(diǎn)優(yōu)化越來越被重視。下面我們就來說一下移動(dòng)適配的三種方式。移動(dòng)適配方式主要分為三種類型：跳轉(zhuǎn)適配、代碼適配、自適應(yīng)。

跳轉(zhuǎn)適配，顧名思義就是使用不同的設(shè)備訪問時(shí)會(huì)跳轉(zhuǎn)到不同的URL上，例如PC訪問時(shí)是www.，而移動(dòng)端訪問時(shí)是wap.或者m.。

代碼適配就是利用后臺(tái)服務(wù)器的動(dòng)態(tài)頁(yè)面代碼，不同設(shè)備的瀏覽器訪問同一URL的時(shí)候，服務(wù)器動(dòng)態(tài)返回不同版本的代碼，實(shí)現(xiàn)同一URL展現(xiàn)不同內(nèi)容。(針對(duì)不同設(shè)備生成不同版本的HTML)

自適應(yīng)在三者當(dāng)中是最高大上的，它使用一種高級(jí)代碼，相同代碼在不同設(shè)備上展現(xiàn)不同的效果。

1、跳轉(zhuǎn)適配

跳轉(zhuǎn)適配是指利用單獨(dú)不同的網(wǎng)址向PC端和移動(dòng)端設(shè)備提供不同的代碼，跳轉(zhuǎn)適配會(huì)先嘗試檢測(cè)用戶所使用的瀏覽器或UA，然后使用HTTP重定向和Vary HTTP標(biāo)頭重定向到相應(yīng)的頁(yè)面。

專業(yè)的語言聽不懂，簡(jiǎn)單的說就是檢測(cè)用戶的瀏覽器讓用戶跳轉(zhuǎn)到移動(dòng)站或者PC站。比如在手機(jī)瀏覽器上訪問PC站，如果做了適配就會(huì)跳到M站。

跳轉(zhuǎn)適配的適配方式又分為：META標(biāo)記、自主適配、百度站長(zhǎng)平臺(tái)提交。具體做法我暫時(shí)不說，大家可以單獨(dú)去了解。

2、代碼適配

代碼適配是指使用相同的網(wǎng)址，但是會(huì)根據(jù)服務(wù)器對(duì)用戶瀏覽器或UA的分析，提供不同的html代碼。代碼適配方式比較簡(jiǎn)單，方法如下：

添加Vary HTTP標(biāo)頭。添加Vary HTTP的作用是通過它來向緩存服務(wù)器說明，在決定是否通過緩存來向用戶提供網(wǎng)頁(yè)前應(yīng)該先考慮不同設(shè)備類型，如果沒有使用Vary HTTP標(biāo)頭，那么緩存服務(wù)器可能會(huì)在移動(dòng)設(shè)備上提供PC端網(wǎng)頁(yè)的html代碼，反之也成立。

在PC站head中添加：

在移動(dòng)站head中添加：

3、自適應(yīng)

自適應(yīng)就是使用相同的網(wǎng)址不考慮用戶瀏覽器UA，向不同設(shè)備的用戶提供同一套html代碼。

自適應(yīng)也叫響應(yīng)式，可以自動(dòng)識(shí)別屏幕寬度并作出相應(yīng)調(diào)整設(shè)計(jì)。

      作用是設(shè)置顯示寬度和手機(jī)屏幕寬度一樣，也就是滿屏顯示。

在head中標(biāo)識(shí)，并使用元素處理自適應(yīng)圖片，即可成功自適應(yīng)。

目前網(wǎng)絡(luò)上絕大部分的網(wǎng)站都是自適應(yīng)的。因?yàn)榫S護(hù)起來簡(jiǎn)單，只需要維護(hù)一套html代碼。