有很多時(shí)候，用戶(hù)在移動(dòng)設(shè)備上會(huì)訪(fǎng)問(wèn)到PC頁(yè)面的地址，這種情況下，我們需要以極快的速度跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端頁(yè)面，盡量減少用戶(hù)的感知，給用戶(hù)最好的體驗(yàn)。那么，如何從PC頁(yè)面重定向到移動(dòng)頁(yè)面呢？本文將為你解答。

如何能快速地由PC頁(yè)重定向到移動(dòng)頁(yè)面，我們按照不同站點(diǎn)的類(lèi)型，給出了幾種常見(jiàn)的實(shí)現(xiàn)方式。

1. 站點(diǎn)有獨(dú)立的移動(dòng)端站點(diǎn)和PC站點(diǎn)

這種情況下，我們需要進(jìn)行服務(wù)端跳轉(zhuǎn)。當(dāng)在移動(dòng)設(shè)備上訪(fǎng)問(wèn)PC站點(diǎn)時(shí)，需要服務(wù)端進(jìn)行環(huán)境判斷，然后重定向到對(duì)應(yīng)的移動(dòng)頁(yè)面。

（1）環(huán)境判斷

環(huán)境的判斷，一般是通過(guò)判斷請(qǐng)求的userAgent，以php為例，下面給出簡(jiǎn)單的代碼實(shí)現(xiàn)


（2）重定向到對(duì)應(yīng)的移動(dòng)端頁(yè)面


2. 站點(diǎn)沒(méi)有獨(dú)立的移動(dòng)站點(diǎn)

這種情況下，我們可以采用前端頁(yè)面響應(yīng)式布局，以便在不同的分辨率和設(shè)備下都可以合理的進(jìn)行頁(yè)面展示。

關(guān)于響應(yīng)式布局，關(guān)鍵的有幾點(diǎn)：

使用media query(媒體查詢(xún))，在不同尺寸、不同設(shè)備上進(jìn)行不同展示，

設(shè)置viewport（視窗）。如果沒(méi)有設(shè)置viewport，在移動(dòng)設(shè)備上將會(huì)使用桌面版屏幕寬度渲染頁(yè)面，然后再進(jìn)行縮放以適應(yīng)屏幕。

布局方式。傳統(tǒng)的固定布局方式，無(wú)法適應(yīng)響應(yīng)式布局，建議采用柵格化布局，可以參考Bootstrap的流式柵格化布局。?