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