뷰포트 설정하기

PC 환경과 모바일 환경에서 디바이스의 해상도가 다르기 때문에 표시하는 내용이 특히 모바일 환경에서 거북하게 보이는 경우가 많다. 이를 개선해 주기 위해서 뷰포트 설정을 이용하면 된다.

뷰포트 설정은 <meta > 를 이용한다. 기본 구조는 다음과 같다.

<meta name="viewport" content="..." >

content 안에 들어갈 내용은 다음과 같은데, 어떻게 적용되는지는 값을 바꿔가면서, 실제 핸드폰에 어떻게 보이는지를 경험해보는 것이 좋을 것 같다.

width=device-width

initial-scale=1.0

user-scalable=no

minimum-scale=1.0

maximum-scale=2.0