Chrome Dev Summit 2018 is happening now and streaming live 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= 텍스트가 포함되는지 검사합니다. 그러나 widthdevice-width와 같은지는 검사하지 않습니다. initial-scale 키-값 쌍도 검사하지 않습니다.