콘텐츠의 크기가 표시 영역에 알맞지 않음
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
표시 영역은 페이지 콘텐츠가 표시되는
브라우저 창의 부분입니다.
페이지의 콘텐츠 너비가 표시 영역 너비보다 작거나 클 경우 모바일 화면에서 올바르게 렌더링되지 않을 수 있습니다.
예를 들어 콘텐츠 너비가 너무 크면 콘텐츠에 맞춰 콘텐츠가 축소되어 텍스트를 읽기 어렵게 만들 수 있습니다.
Lighthouse 콘텐츠 너비 감사 실패 이유
Lighthouse 는 너비가 표시 영역의 너비와 동일하지 않은 페이지를 신고합니다.
window.innerWidth
가 window.outerWidth
와 같지 않으면 감사가 실패합니다.
참고: Lighthouse 보고서 UI에서는 모든 PWA 하위 카테고리 (빠르고 안정성 있음 , 설치 가능 , PWA 최적화 )의 모든 감사를 통과하면 전체 PWA 배지가 제공됩니다.
모바일 화면에 적합한 페이지를 만드는 방법
이 감사는 페이지가 휴대기기에 최적화되어 있는지 확인하는 우회 방법입니다.
모바일 친화적인 페이지를 만드는 방법에 관한 개요는 Google의 반응형 웹 디자인 기본사항 을 참고하세요.
다음과 같은 경우 이 감사를 무시할 수 있습니다.
사이트를 모바일 화면에 최적화할 필요는 없습니다.
페이지의 콘텐츠 너비가 의도적으로 표시 영역 너비보다 작거나 커졌습니다.
자료
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2024-04-16(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2024-04-16(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2024-04-16(UTC)"],[],[]]