移動端（手機）網站應該注意什麼問題？

01-14

包括網站代碼，頁面的設計以及網站的優化各個方面吧，特別是HTML5的網站。希望有經驗的同學談談。

因為最近在研究這個，就整理了以下，寫寫我的一點看法。

移動端網站的開發策略

首先，我們要先確定網站的方向，或者說是策略。基本上移動端網站有3個選項：

1. 響應式網站，即網站的域名和URL都不變，只是根據瀏覽設備而自動調整頁面的大小和內容，這主要是靠HTML5和CSS代碼實現的。

2. 網站的域名和URL不變，但是根據用戶的設備來進行判斷，給用戶不同的頁面，即URL不變，但是HTML頁面發生了變化。

3. 啟用新的子域名，如http://m.domain.com，根據用戶的設備來進行判斷，然後進行跳轉。這裡先埋個伏筆，跳轉方式很重要，後面詳細說明。

在這裡，我想重點說一下，第一種方式是最佳的方式。但是這種方式也有很多的挑戰。而國內普遍採用的是第三種方式，這種方式從網站優化上和成本上都不是非常好，但是客觀現實的影響，卻比較普遍。還有就是國內的移動網路的網速實際還比較慢，所以移動端的網站需要進行精簡，這樣的話對桌面端的網站進行適配是肯定不行的。

1. 第一種方式面臨的問題是非智能機的瀏覽器和台式機的IE6等瀏覽器對HTML5和CSS的支持是存在問題的。

2. 第二種方式，我是持謹慎態度的，因為我會擔心網站對百度蜘蛛的處理問題，因為百度蜘蛛沒有區分移動和桌面的蜘蛛，這樣在判斷跳轉上可能會出現問題，從而對網站的排名和權重有不利的影響。

3. 第三種方式，其實是個無奈之選，但是從技術上絕對不是最佳之選。o(╯□╰)o

下面的很多內容都是針對採用第三種方式的網站來給的建議。其實第三種方式最大的挑戰就在於使搜索引擎蜘蛛正確的判斷我們的網站為移動端網站。

跳轉方式

根據用戶訪問設備來進行的跳轉的時候，可以採用兩種方式HTTP重定向和Javascript重定向。HTTP重定向就是我們通常說是的301和302重定向。但是我會建議大家採用302重定向的方式。因為如果搜索引擎蜘蛛對頁面的判斷出現了問題，無法準確判斷是移動端網站的時候，採用301跳轉回有比較大的風險。而Javascript重定向這種方法，對某些搜索引擎而言不是很友好。

如果對搜索引擎的蜘蛛判斷不準確時，即無法判斷是否為移動端蜘蛛時，讓其返回適配版的HTML版網站即可，無需跳轉回桌面版。

URL規劃

移動端的URL規劃最好與桌面端保持一致，除了前面的域名不同以外。如：http://www.domain.com/abc.html和m.domain.com/abc.html。同時需要注意的是，不要給移動端的URL添加很多追蹤參數。使用規範、簡單的url，盡量去除與頁面內容無關的參數，如用來區分手機型號、區分訪問用戶，方便統計等的參數。（如果需要添加參數的處理方式，可以採用其他的方法。）

我們再幫著搜索引擎判斷我們為移動端網站時，主要有2種方法，建議最好是同時採用。

DOCTYPE聲明

使用DOCTYPE聲明有助於搜索引擎識別該頁面是否適合手機瀏覽。

& 聲明位於文檔中的最前面的位置，處於 & 標籤之前。例如：

xhtml協議的手機頁面中可以使用如下DOCTYPE：

http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

wml協議的手機頁面可以使用如下DOCTYPE:

http://www.wapforum.org/DTD/wml_1.1.xml">

而HTML5協議的DOCTYPE為：

這一段的內容摘自百度出的《手機優化指南v1.1》。需要注意的是HTML5的網站容易被搜索引擎判斷為是響應式網站，即一個網站可以適配不同的瀏覽設備。所以，最好還是添加&標籤。

&標籤

&標籤，需要在移動端和桌面端同時對頁面進行注釋。這裡需要注意的是這樣就需要保持移動端和桌面端的網站URL規劃一致。

例如：

桌面端的頁面的可以寫為：

&

移動端的頁面的可以寫為：

&

Title Description

Title Description最好也跟桌面端的網站保持一致，但是可以在網站名稱的部分加入手機站的表述，如:桌面端的網站&XXX網站-專註國內二手房交易市場&;而移動端網站則可以寫成&手機XXX網站-專註國內二手房交易市場&或&XXX網站手機版-專註國內二手房交易市場&

麵包屑導航

很重要，其實麵包屑導航在不管是桌面端還是移動端都非常重要。但是很多人在移動端容易忽略麵包屑導航。

robots.txt文件

robots.txt文件最好不要對搜索引擎蜘蛛進行屏蔽，保持開放狀態。

移動端（手機）網站的優化方法原文在我的博客。

偶也是玩過手機網站的。。。。

看人家總結的特別棒，我就說下自己的開發心得吧

一、響應式布局：

這個大家都在說。。。說的很爛的了。不解釋

二、善用CSS3，什麼彈性盒子了。變形了。過渡了。

三、少用圖片。能用CSS做到的。就用CSS。CSS3很強大了。如果你設計稿設計的特別好。可以直接使用CSS3PE生成對應的CSS3樣式

四、用json來傳值，少用a

五、頁面的深度。。。。咳咳咳。。專業的忘記了。就是不要太深。。。點一個進一個在進一個。。。最後都回不來首頁了

也就這些吧。。暫時想到了。。吃飯去了

注意適配，注意頁面布局

我在開發中也遇到過很多問題，剛剛開始就是一些兼容性，html5跟css3自己接觸比較少，所以出現了種種問題。

再者就是體驗問題了，字體的大小，圖片的位置都要考慮好。