CSS viewport와 모바일 페이지의 기준 폭을 이해합니다.
viewport meta가 없으면 모바일 브라우저가 넓은 가상 화면을 축소할 수 있습니다. width=device-width와 initial-scale=1로 CSS 픽셀 기준을 실제 기기 폭에 맞춥니다.
이번 예제의 출발점은 <meta name="viewport" content="width=device-width, initial-scale=1">입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 viewport meta의 각 값이 무엇을 뜻하는지 설명해보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
user-scalable=no로 확대를 막으면 저시력 사용자의 접근성을 해칩니다.
직접 바꿔보세요viewport meta의 각 값이 무엇을 뜻하는지 설명해보세요.