<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0,
minimum-scale=1.0">
</head>
<body>
....
</body>
</html>
위 소스를 해석하면 사용자가 현재 접속하고 있는 웹페이지의 너비를 기기 화면 너비에 맞추고 사용자가 브라우저의 확대/축소를 불가능하게 하고 처음 웹사이트를 방문했을 때, 초기, 최소, 최대 화면의 배율을 설정하지 못하게 막는 코드입니다. 즉, 사용자가 사용하는 스마트폰에 손가락으로 아무리 작게 하려고 해도 안되는 이유가 이것입니다.
※ content에 여러 속성값을 쓸 때 쉼표로 분리하여 표현할 수 있습니다.
width=device-width
사용자가 접속한 기기 화면의 넓이에 따라 웹사이트의 넓이를 맞추겠다는 것을 의미합니다. 따라서 device-width는 100%의 크기로 화면에 출력됩니다.
user-scalable=no
사용자가 브라우저의 확대/축소를 불가능하게 하는 기능입니다. yes와 no로 설정할 수 있습니다.
initial-scale=1.0
사용자가 처음 접속한 웹사이트에 대해서 화면의 배율을 설정하는 기능입니다. 여기서 1.0은 100%를 의미합니다. 즉, 1보다 큰 값으로 적용하면 확대된 페이지로 표시됩니다.
maximum-scale=1.0
최대 배율을 의미하는 것으로 최대 크기를 설정할 수 있습니다. 1에서 10까지 설정할 수 있습니다.
minimum-scale=1.0
최소 배율을 의미하는 것으로 최소 크기를 설정할 수 있습니다. 이것 또한 1에서 10까지 설정할 수 있습니다.
이런식으로 사용자가 사용하는 기기에 따라 화면을 조절할 수 있습니다. 반응형 웹을 만들기 위해서 꼭 필요한 것으로 잘 알아두면 좋겠습니다!
'HTML·CSS > HTML·CSS' 카테고리의 다른 글
| mix-blend-mode (0) | 2020.03.27 |
|---|---|
| .clearfix (0) | 2020.03.27 |
| srcset (0) | 2020.03.26 |
| <em></em> (0) | 2020.03.26 |
| display : initial (0) | 2020.03.26 |
댓글