Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

HTML 具有視口元標記

爲什麼說此審查非常重要

如果沒有視口元標記,移動設備將以典型的桌面設備屏幕寬度渲染頁面,然後對頁面進行縮放以適合移動設備屏幕。 通過設置視口,您可以控制視口的寬度和縮放比例。查看以下鏈接可瞭解詳情:

如何通過此審查

在 HTML 的 <head> 中添加一個視口 <meta> 標記。

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...
</head>

width=device-width 鍵值對將視口寬度設置爲設備寬度。 在訪問頁面時,initial-scale=1 鍵值對設置初始縮放級別。

如何實現此審查

本部分介紹如何實現此審查,以便您可以瞭解計算此審查得分的方式。

Lighthouse 檢查文檔的 <head> 中是否有 <meta name="viewport"> 標記。 它也會檢查此節點是否包含 content 屬性,且該屬性值是否包含文本 width=。 不過,它不會檢查 width 是否等於 device-width。 Lighthouse 也不會檢查 initial-scale 鍵值對。