스마트 폰 이전 시대에는 대부분의 웹 페이지 데스크탑 모니터 사이즈에 제작되어 모바일 기기와 같은 작은 화면에서 내용이 모두 보이지 않았다.
따라서 모바일 브라우저들은 뷰포트(viewprot) 라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작.
( 일반적인 데스크탑 모니터 사이즈와 비슷한 980px)
스마트폰의 스크린 사이즈(device-width/height)와 브라우저가 화면을 나타내는 가상의 화면 사이즈(viewport)의 차이 O
기본 뷰포트의 크기 980px이므로, width가 980px 정도인 웹 페이지를 모바일 브라우저로 볼 경우 가로 스크롤 없이 딱 화면에 맞춰서 나옴. 이럴 경우 스크롤 하지 않아도 내용이 다 보이는 장점이 있으나, 그림, 글자들이 그 폭에 맞춰서 작아져 가독성이 매우 떨어짐.
뷰포트의 크기와 스케일은 태그를 통해 조정 가능.
뷰포트 설정
: 뷰포트 설정 태그는 <meta> 태그로 <head> 태그에 위치함.
<meta name="viewport" content="뷰포트의 설정 값">name 속성에 "viewport"라고 선언하면 content 속성에 뷰포트를 설정하는 내용 들어감.
content 설정
| width (height) | 뷰포트의 가로(세로) 크기를 지정. px단위의 수치가 들어갈 수 있다. 대부분 특수키워드인 device-width(height) 를 사용. (뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정한다는 의미.) |
| initial-scale | 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정한다. (소수값) |
| user-scalable | 사용자의 확대/축소 기능을 설정할 수 있다. |
대부분의 모바일 웹 사이트의 뷰포트 설정.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive Web Design Viewport (w3schools.com)
Responsive Web Design Viewport
Responsive Web Design - The Viewport What is The Viewport? The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pa
www.w3schools.com
'정리' 카테고리의 다른 글
| [자바스크립트의 시작] (2) Javascript 제어문 (비교연산, 조건문) (0) | 2021.08.22 |
|---|---|
| [자바스크립트의 시작] (1) 웹과 Javascript (0) | 2021.08.22 |
| [비전공자를 위한 HTML/CSS] (40) 미디어 쿼리 실습 (0) | 2021.08.20 |
| [비전공자를 위한 HTML/CSS] (39) 미디어 쿼리 Syntax (0) | 2021.08.20 |
| [비전공자를 위한 HTML/CSS] (38) 미디어 쿼리 (0) | 2021.08.19 |
