웹 기술 기초
스마트폰에도 대응하는 반응형 디자인 페이지에서 <head>에 <meta name="viewport" content="width=device-width, initial-scale=1">을 쓰는 주된 목적은?
- A페이지를 배치하는 폭을 단말 화면의 폭에 맞추어, 축소하지 않고 표시하게 하기 위해
- B이미지를 단말 화면의 해상도에 맞추어 서버에서 자동으로 다시 만들게 하기 위해
- CPC 브라우저에서만 표시하게 하고, 스마트폰에서의 접근을 거부하기 위해
정답과 해설 보기
정답: A. 페이지를 배치하는 폭을 단말 화면의 폭에 맞추어, 축소하지 않고 표시하게 하기 위해
이 지정이 없으면 스마트폰 브라우저는 PC용 페이지를 상정한 넓은 폭(일반적으로 980px 정도)으로 페이지를 배치한 뒤, 화면에 들어가도록 축소하여 표시합니다. width=device-width로 배치 폭을 단말 화면의 폭에 맞추고, initial-scale=1로 처음 배율을 원래 크기(1배)로 합니다. 그런 다음 CSS의 미디어 쿼리(예를 들어 @media (max-width: 600px))로 화면 폭에 따라 배치나 글자 크기를 전환합니다.