行動裝置相容性測試工具

打造適合透過行動裝置瀏覽的網站是經營線上業務的一項重要環節。在許多國家/地區,智慧型手機的流量現在已經超過個人電腦。如果您尚未建立適合行動裝置瀏覽的網站,我們極力推薦您這麼做。Search Console 的行動裝置相容性測試工具提供了快速簡便的測試方法,可讓您瞭解自己的網站頁面是否適合行動裝置瀏覽。

開啟行動裝置相容性測試工具

 

使用行動裝置相容性測試工具

行動裝置相容性測試工具非常簡單好用,只要輸入目標測試網頁的完整網址即可開始測試。如果網頁設有重新導向,測試會在重新導向完成後才開始。一般來說,測試過程不到一分鐘即可完成。

測試結果會附上一張螢幕截圖,顯示該網頁在行動裝置上對 Google 呈現的畫面,並且列出所找到的任何行動裝置可用性問題。行動裝置可用性問題是指可能影響使用者透過行動 (小螢幕) 裝置瀏覽網頁的問題,包括字型太小 (在小螢幕上難以閱讀),以及使用 Flash (大多數行動裝置不支援) 等。

如果無法存取網頁

如果測試工具因為一些原因無法存取該網頁,就會顯示錯誤訊息說明問題。網路連線問題或網站掛掉都可能導致測試工具無法存取網頁。

這項工具是以 Googlebot 的身分存取網頁 (亦即代表 Google,而非使用您的憑證),因此可能遭到 robots.txt 檔案封鎖。
如果網頁上有無法載入的資源

如果測試工具無法載入網頁使用的所有資源,就會顯示警告訊息。這裡的資源指的是頁面所包含的外部資源,例如圖片、CSS 或指令碼檔案。發生這種情況的可能原因如下:

  • 資源未在合理的時間內載入完成。在這種情況下,請嘗試再執行一次測試。如果還是發生同樣的問題,您可以考慮改由別處代管資源,或是嘗試找出相關主機沒有回應的原因,並設法解決。
  • 資源未出現在指定位置 (404 錯誤)。請修正資源網址。
  • 未登入的使用者無法存取資源。由於測試工具是以匿名使用者身分存取網頁,因此,請確保匿名使用者能存取該網頁的所有資源。
  • Robots.txt 檔案禁止 Googlebot 存取資源。如果牽涉到的是重要資源 (如下所示),而且是屬於您自己網站上的資源,建議您解除封鎖這些資源,讓 Googlebot 能順利存取。如果是屬於其他網站上的資源,建議您與該網站的管理員聯絡,請對方解除封鎖。

解除封鎖重要資源

如果遭到封鎖的是重要資源,可能會嚴重影響 Google 對該頁面的解讀。舉例來說,如果有一張大型圖片遭到封鎖,儘管頁面看似適合透過行動裝置瀏覽,實際上卻可能不是如此;如果遭到封鎖的是 CSS 檔案,則可能會導致網頁套用不正確的字型樣式 (例如字體太小,不適合在行動裝置上閱讀)。這類情況會影響到行動裝置可用性得分和 Google 檢索您網頁的能力,因此您必須確保 robots.txt 檔案不會禁止 Googlebot 存取重要資源,並允許一般使用者存取重要資源。

測試結果不穩定/網頁載入問題

當部分資源無法載入或發生其他網頁載入問題時,由於每次執行測試過程中載入的資源組合都有所不同,因此個別測試結果之間可能會有些微差異。在您沒有進行任何變更的情況下,如果每次執行測試的網頁轉譯結果都有所變化,請檢查是否有「網頁載入問題」警告;如果出現該警告,請點選警告進一步瞭解可能導致網頁持續轉譯失敗的原因。

行動裝置可用性錯誤

行動裝置相容性測試工具可偵測出下列可用性錯誤:

錯誤清單

使用不相容的外掛程式

網頁內含大多數行動瀏覽器不支援的外掛程式 (如 Flash)。建議您使用能廣泛支援的最新網路技術 (如 HTML5) 重新設計網頁。進一步瞭解網頁動畫的規定指南。

未設定可視區域

您的網頁尚未定義 viewport 屬性,這個屬性可以指示瀏覽器如何調整網頁的大小,並且配合螢幕尺寸縮放網頁。由於網站訪客使用的裝置各異且螢幕大小也各有不同,從大型的桌上型螢幕,乃至於平板電腦和小型智慧型手機等皆有可能,因此您應該使用 meta viewport 標記為網頁指定可視區域。詳情請參閱回應式網頁設計基礎

未將可視區域設為「device-width」

您的網頁定義的 viewport 屬性為「fixed-width」,表示網頁無法隨螢幕尺寸做出調整。如要修正這個錯誤,請採用回應式網頁設計,並且將可視區域設定為符合裝置寬度並配合縮放。請參閱如何正確設定可視區域

內容寬度超出螢幕顯示範圍

這份報告指出哪些網頁需要水平捲動才能查看網頁上的文字和圖片。如果網頁在 CSS 宣告中使用了絕對值,或者使用需特定瀏覽器寬度 (例如 980 像素) 才可達到最佳顯示效果的圖片,就會發生這種情況。如要修正這個錯誤,請務必確認網頁在 CSS 元素上使用相對寬度和位置值,且圖片可以縮放。詳情請參閱根據可視區域調整內容大小

文字太小,不易閱讀

這份報告指出哪些網頁的字型過小導致不易辨識,且使用行動裝置的訪客必須「以雙指撥動縮放」才有辦法看清楚。請先指定網頁的可視區域,然後為可視區域中的字型大小設定適當的值。如要瞭解更多關於字型的最佳做法,請參閱使用易讀的字型大小

可點選的元素之間距離太近

這份報告會列出網站網址,這些網站上的觸控元素 (例如按鈕和導覽連結) 彼此距離過近,導致行動裝置使用者在使用手指輕觸想要選取的元素時,也會同時碰觸到鄰近的元素。如要修正這些錯誤,請務必將按鈕和導覽連結調整為適合行動裝置訪客使用的大小和間隔。詳情請參閱適當調整點按目標的大小

後續步驟

這對您有幫助嗎?
我們應如何改進呢?