viewport 메타 태그가 없으면 모바일 기기에서 일반적인 데스크톱 화면 너비로 페이지를 렌더링한 다음 페이지를 축소하여 읽기 어렵게 만듭니다.
표시 영역 메타 태그를 설정하면 모든 기기에서 크기가 올바르게 조정되도록 표시 영역의 너비와 배율을 제어할 수 있습니다.
Lighthouse viewport 메타 태그 감사가 실패하는 이유
Lighthouse는 뷰포트 메타 태그가 없는 페이지에 플래그를 지정합니다.
다음 조건을 모두 충족하지 않으면 페이지가 감사에 실패합니다.
- 문서의 <head>에 <meta name="viewport"> 태그가 포함되어 있습니다.
- 뷰포트 메타 태그에 content 속성이 포함되어 있습니다.
- content 속성 값에 width= 텍스트가 포함됩니다.
표시 영역 메타 태그를 추가하는 방법
적절한 키-값 쌍이 있는 뷰포트 <meta> 태그를 페이지의 <head>에 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
각 키-값 쌍의 기능은 다음과 같습니다.
- width=device-width는 뷰포트의 너비를 기기의 너비로 설정합니다.
- initial-scale=1는 사용자가 페이지를 방문할 때 초기 확대/축소 수준을 설정합니다.
initial-scale이 1 미만
initial-scale이 1 미만으로 설정된 경우 브라우저에서 두 번 탭하여 확대/축소 기능을 사용 설정할 수 있습니다. 이 기능은 일반적으로 모바일에 최적화되지 않은 데스크톱 사이트에 사용됩니다. 이렇게 하면 브라우저가 두 번째 '더블' 탭이 발생하는지 확인하는 동안 모든 탭 상호작용에 300밀리초 지연이 추가됩니다. 따라서 initial-scale이 1 미만으로 설정된 경우에도 감사가 실패합니다.