回應式網頁設計 (RWD) 是一種設定，可讓伺服器一律向所有裝置 發送相同的 HTML 程式碼，並透過 CSS 調整網頁在裝置上的 呈現方式。 如果所有 Googlebot 使用者代理程式均獲准檢索網頁及其資產 (CSS、javascript 和圖片)，則 Google 的演算法應能自動偵測 這項設定。

TL;DR

• 使用 meta name="viewport" 標記，指示瀏覽器如何調整內容。
• 前往我們的「Web 基礎知識」網站參閱更多相關文件。

使用 meta name="viewport"

如要向瀏覽器傳送資訊，告知網頁會配合所有裝置適時調整，請在文件的標題 加入中繼標記：

 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

中繼檢視點標記能指示瀏覽器如何 配合裝置的寬度調整網頁大小和縮放比例。如果 未提供中繼檢視點元素，行動瀏覽器會預設 以電腦版螢幕的寬度來轉譯網頁 (雖然因裝置而異， 但一般約為 980px)。行動瀏覽器隨後會嘗試加大字體， 並且選擇將內容縮放至符合螢幕的大小，或者僅顯示 與螢幕大小相符的部分內容，讓內容更容易閱讀。

對使用者而言，這代表字體大小可能不一致， 且使用者可能需要輕觸兩下或使用雙指撥動縮放， 才能查看及使用內容。對 Google 而言，由於網頁要求 在行動裝置上進行這類互動，我們可能無法判斷網頁 是否適合行動裝置使用。

如需使用回應式圖片，請加入 <picture> 元素。

一般而言，如果您的網站可以在新型瀏覽器 (例如 Google Chrome 或 Apple Mobile Safari) 中運作，那麼該網站就可以使用我們的演算法。

為什麼要使用回應式設計

我們建議您使用回應式網頁設計的原因如下：

• 使用者可以使用單一網址，以更輕鬆的方式分享及連結到您的內容。
• 可協助 Google 的演算法為網頁正確指定索引編列屬性， 不需要發送訊息指明既有的相對應電腦版/行動版網頁。
• 無需維護多個內容相同的網頁，減少工程師的處理時間。
• 降低行動版網站發生常見錯誤的機率。
• 使用者無需重新導向即可瀏覽最適合裝置大小的畫面， 縮短載入時間。此外，根據使用者代理程式執行重新導向容易出錯， 可能導致網站的使用體驗大打折扣 (詳情請參閱 「偵測使用者代理程式時遇到的問題」一節)。
• Googlebot 檢索您的網站時可節省資源。 對於採用回應式網頁設計的網頁， 任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (不需依據不同的使用者代理程式多次反覆檢索)， 即可擷取所有版本的內容。提高檢索效率可間接協助 Google 為網站中的更多內容建立索引，並確保擷取的內容是 最新版本。

如果您有興趣進一步瞭解回應式網頁設計，可先前往網站管理員中心參考 我們的網誌文章，以及造訪網頁基礎知識網站。

JavaScript

建立適合行動裝置瀏覽的網站時，您必須仔細思考 如何使用 JavaScript 調整網站在不同裝置上的呈現方式 和行為。JavaScript 的典型用法包括自動判定應在網頁中 顯示何種廣告或哪一種解析度的圖片。

本節說明 JavaScript 的不同使用方法，以及這些方法與 Google 建議使用的回應式網頁設計之間的關係。

常見配置

建立適合行動裝置使用的網站時，三種常見的 JavaScript 實作方法如下：

• 適應性 JavaScript：在這項配置中，網址會向所有裝置提供相同的 HTML、CSS 和 JavaScript 內容。在裝置上執行 JavaScript 時， 網站的呈現方式或行為會發生變化。如果網站需要 使用 JavaScript，那麼 Google 建議您使用此配置。.
• 聯合偵測：在這個實作方法中，網站會同時使用 JavaScript 和裝置功能的伺服器端偵測來向不同的裝置 提供不同的內容。
• 動態提供的 JavaScript：在這項配置中，網站會向所有裝置 提供相同的 HTML，但會透過相關網址來提供 JavaScript (會根據裝置的使用者代理程式動態提供不同的 JavaScript 程式碼)。

下文將詳細說明這些配置。

適應性 JavaScript

在這項配置中，網址會向所有裝置提供相同的內容 (HTML、CSS、JavaScript 和圖片)。只有在裝置上執行 JavaScript 時，網站的呈現方式或行為 才會發生改變。這與使用 CSS 媒體查詢的回應式網頁設計具有 類似原理。

例如，假設網頁向所有裝置提供相同的 HTML (其中包括 <script> 元素)， 用以要求提供 JavaScript 的外部網址。所有要求 JavaScript 網址的裝置 都會接收到相同的程式碼。執行時，JavaScript 會偵測裝置 並對網頁進行部分調整，例如加上專為智慧型手機最佳化的 圖片或廣告代碼，而非針對電腦最佳化的 內容。

這項配置與回應式網頁設計緊密相關，我們的演算法可以 自動偵測這項設定。此外，這項配置不需要使用 Vary HTTP 標頭，因為網頁及其資產的網址 不會動態提供內容。鑒於上述優勢， 如果您的網站需要使用 JavaScript，則建議您使用 這項配置。

聯合偵測

聯合偵測設定可讓伺服器與 JavaScript 在用戶端 配合執行，以便偵測裝置的功能並調整 提供的內容。

例如，假設某個網站可根據裝置是電腦或智慧型手機 改變內容的呈現方式。在此例中，網站可以加入 用於偵測螢幕尺寸的 JavaScript，然後將偵測到的數據傳送給伺服器， 由伺服器對要發送給裝置的程式碼進行更新或更改。通常， JavaScript 會將偵測到的裝置功能儲存在 Cookie 中， 供伺服器用來讀取來自同一台裝置的後續造訪。

由於伺服器會向不同的使用者代理程式回傳不同的 HTML， 因此聯合偵測應視為一種動態服務配置。詳情請參閱 動態服務一節。簡而言之，如果網址需要 向不同的使用者代理程式提供不同的 HTML 內容， 網站中必須加上「Vary: User-agent」HTTP 回應標頭。

動態提供的 JavaScript

在這項配置中，伺服器會向所有裝置提供相同的 HTML， 其中包括 <script> 元素。該元素是用於新增外部 JavaScript 檔案， 這個檔案的內容則根據發出要求的使用者代理程式而有所差異。也就是說， JavaScript 程式碼是動態提供的。

答案是...不一定！可能的情形如下：

• 如果您可以為網站選用回應式範本或主題，那麼就有可能將網站免費改成行動版網站。無論訪客使用的是桌上型電腦、平板電腦或手機，回應式範本/主題都能自動調整為適合螢幕的大小，為使用者提供最佳瀏覽體驗。

• 如果您具備建立行動版網站的技術，就能在不花半毛錢的情況下，將網站改為行動版。歡迎造訪 Web Fundamentals網站！

• 聘請開發人員將網站改為行動版可能需要花費時間和金錢。另外，如果您的網站已建立多年，建議您聘用新的開發人員為您重新建立網站。在這種情形下，您就必須支付翻新網站的費用。這是因為現今的網站開發技術和主題 (或網頁範本) 日新月異，重新建立網站或許會比整修網站更有效率。這種做法尤其適合下列類型的網站：

  • 以 Flash 建立的網站
  • 使用過時電子商務平台的網站

就基本的實作層面而言，在將既有的電腦版網站轉換成行動版本時，必須將電腦版網站現有的內容區段重新編排成適合透過行動裝置瀏覽的設計樣式。

無論您是聘請開發人員設計或親自動手建立行動版網站，都可以前往我們的行動版網站搜尋引擎最佳化網頁參閱相關文件，進一步瞭解實作上的技術性資訊。

在美國，有 94% 的智慧型手機使用者會透過手機搜尋當地資訊。 有趣的是，77% 的行動裝置搜尋都發生在使用者的住家或公司，而這些都是可能會有桌上型電腦的地方。

行動科技正在改變世界。在這個人人都有智慧型手機的時代，大家都不停在與人互動及搜尋資訊。在許多國家/地區，智慧型手機的數量已經超過個人電腦，因此打造適合透過行動裝置瀏覽的網站已成為經營線上業務的一項重要環節。

 

如果您不知道自己的網站是否適合透過行動裝置瀏覽，歡迎立即接受行動裝置相容性測試！

 

 

最近剛被歐盟指控違反反壟斷法的互聯網搜尋引擎巨擘Google(GOOG-US)，今(21)日起改變全球手機版搜尋器的結果排序方式，由以往與桌面版一樣，改為根據手機瀏覽網頁的困難程度排列，意味沒有特別設立手機版網頁的企業，在搜尋結果的排位將大幅下跌，減少潛在顧客瀏覽其網頁的機會。此舉牽連甚廣，有網絡專家甚至將這改變稱為「手機浩劫」(Mobilegeddon)。

香港《文匯報》綜合外電消息，Google會根據網站的字型大小、連結密集程度，以及版面能否隨屏幕大小調整，決定網站是否適合手機觀看，假如被評定為不適合，便會把它在搜尋結果排序中貶到較低位置。今次更新將適用於全球所有語言的Google搜尋器，但使用手提電腦或桌上電腦搜尋均不受影響。

CNET網站助理編緝阿赫塔爾認為，用家以手機或平板電腦瀏覽網頁時，的確希望能搜尋到版面配合手機的網頁。由於目前Google有一半搜尋是通過流動裝置進行，若企業沒設置手機版網站，它們在手機搜尋結果的排序便會大幅下跌，損失難以估計。

手機市場分析公司Somo測試顯示，不少大型企業、傳媒以至政府機構網站均會被新系統排到低位，例如時裝品牌Versace、微軟Windows Phone、英國《每日郵報》、瑞安航空，還有控告Google的歐盟。

由於很多網站都依靠搜尋器引導用家前往，故Google此舉可以造成龐大影響。Google去年更新Panda搜尋規則後，eBay便因此失去在搜尋結果的最高排名，更連帶影響公司業績。

大型企業及機構固然受害，但影響最大的還是小商店。儘管Google今年2月已預告有關更新，小企業受資源及技術所限，難以迅速迎合新要求，部分企業更對改變全不知情，只能眼睜睜看網站排位急降。網頁設計公司Duda總裁薩丹估計，互聯網將有數百萬網頁受新制打擊。

澳洲小型企業議會已向Google提出呈請，要求給予更長寬限期，讓小店適應新排序。執行董事斯特朗解釋部分企業貨品實惠、網頁充實，顧客應有權利找到它們，認為新方案正正反映Google的霸權。Google回應指顧客閱讀的困難程度跟網頁內容同樣重要，將協助各網站改變。 

英國《衛報》報導稱，Google還會為手機版搜尋器作另一改動，搜尋結果頁的網址格式會簡化，不再出現全個網址。以蘋果公司Apple Watch的頁面為例，現時Google會顯示頁面的詳細網址「www.apple.com/hk/watch」，但新版搜尋器將以「Apple > hk > watch」顯示網址。

新的搜尋結果不再列出網域和全個網址，而是使用網站的真實名稱，Google認為這有助用家更了解網站的內在結構，也能提供另一個方式，快速檢視搜尋結果是否用家需要。新顯示經測試後，也會擴展至桌上版。

Google一直致力減省冗長網址，旗下Chrome瀏覽器下月將推出新版本，網址欄只會顯示主域名，後綴全數省去，期望令用家更易發現網絡釣魚行為，減低受騙機會。

據《波士頓環球報》報導，歐盟上周正式指控Google涉嫌蓄意在搜尋結果中，把自家服務排在較前列，對質素較佳的競爭者不公平。事件餘波未了，旅遊網站TripAdvisor及Expedia投訴Google同樣利用搜尋次序，推廣自家旅遊服務Google Flights。

TripAdvisor總裁考費爾發聲明指，Google改變搜尋結果排序，令顧客先接觸有利Google的搜尋結果，犧牲顧客利益，並非公平競爭，這不能繼續下去。歐盟上周亦透露正調查Google其他商業活動。

Google高級副主席辛格爾否認指控，更指TripAdvisor過去4年收入翻倍，穩居最大旅遊網站的地位，卻指控Google打壓。

美國聯邦貿易委員會(FTC)競爭事務局前助理總監賴利批評Google的反駁，指即使TripAdvisor依然成功，Google的做法仍有可能減少對手的潛在顧客，並不代表Google沒有做出反競爭行為。

搜尋結果排位方法

■根據網站的字型大小、連結密集程度，以及版面能否隨屏幕大小調整，決定網站是否適合用手機觀看。

■假如被評定為不適合，便會在搜尋結果排序中貶到較低位置。

資料來源:鉅亨網