沒有寬度或初始比例的標記

許多搜尋引擎會根據網頁適合行動裝置瀏覽的方式，決定網頁排名。 如果沒有可視區域中繼標記，行動裝置會以一般電腦螢幕的寬度轉譯網頁，然後縮小網頁，導致難以閱讀。

設定可視區域中繼標記可讓您控制可視區域的寬度和縮放比例，以便在所有裝置上正確調整大小。

Lighthouse 可視區域中繼標記稽核失敗

Lighthouse 標記上沒有可視區域中繼標記：

Lighthouse 稽核顯示網頁缺少可視區域

除非符合下列所有條件，否則頁面未通過稽核： - 文件的 <head> 包含 <meta name="viewport"> 標記。 - 可視區域中繼標記包含 content 屬性。- content 屬性的值包含 width= 文字。

Lighthouse「不會」檢查 width 等於 device-width。也不會檢查 initial-scale 鍵/值組合。不過，您還是需要同時加入這兩種資訊，網頁才能正確顯示在行動裝置上。

如何新增可視區域中繼標記

使用適當的鍵/值組合，在網頁的 <head> 中加入可視區域 <meta> 標記：

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

每個鍵/值組合的功用如下： - width=device-width 會將可視區域的寬度設為裝置的寬度。 - initial-scale=1 會在使用者造訪網頁時設定初始縮放等級。

資源