<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport는 무엇입니까요?
우리가 보는 영역이다. 화면 크기에 따라 보이는 영역 또한 다르다. PC화면, 폰화면에 따라 크기가 달라야 한다.
옛날에는 PC화면으로만 보면 됐는데 지금은 다양한 디바이스가 있기 때문에 크기를 해결하기 위해 viewport가 개발되었다. 티스토리의 반응형 스킨 같은 거다.
↪ width=device-width // 화면 너비에 따라 콘텐츠 너비를 설정한다.
↪ initial-scale=1.0 // 처음 로딩시 확대, 축소 수준을 설정한다.
다음을 지켜야 한다.
• 너비가 큰 요소를 사용하지 마라. 영역보다 큰 요소를 사용하면 가로 스크롤이 생길 수 있다. 가로 스크롤은 화면이 작은 디바이스에서 보기 아주 불편하다.
• 특정 디바이스의 화면 크기로 만들지 말라.
• CSS @media를 사용하여 반응형으로 만들어라. 가로 크기를 %로 써서 상대적 크기를 사용하자.