너비 또는 초기 배율이 포함된 태그가 없음

표시 영역 메타 태그가 없으면 휴대기기는 일반적인 데스크톱 화면 너비로 페이지를 렌더링한 다음 페이지를 축소하여 읽기 어려워집니다.

표시 영역 메타 태그를 설정하면 표시 영역의 너비와 배율을 제어하여 모든 기기에서 크기가 올바르게 조정되도록 할 수 있습니다.

Lighthouse 표시 영역 메타 태그 감사 실패 이유

Lighthouse는 표시 영역 메타 태그가 없는 페이지를 신고합니다.

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는 사용자가 페이지를 방문할 때 초기 확대/축소 수준을 설정합니다.

1 미만의 초기 배율

initial-scale를 1 미만으로 설정하면 브라우저에서 두 번 탭하여 확대/축소 기능을 사용 설정할 수 있습니다. 이 기능은 일반적으로 모바일에 최적화되지 않은 데스크톱 사이트에 사용됩니다. 이렇게 하면 브라우저가 두 번째 '두 번' 탭이 발생하는지 확인하기 위해 기다리는 동안 모든 탭 상호작용에 300밀리초의 지연이 추가됩니다. 따라서 초기 배율이 1 미만으로 설정되는 경우에도 감사가 실패합니다.

자료