반응형 웹(responsive web)이란?

디스플레이 크기가 다른 여러 디바이스에 알맞은 화면의 크기로 변환하는 웹사이트를 말한다.

디바이스에는 태블릿,스마트폰,데스크톱등이 존재한다.

뷰포트(viewport)란?

뷰포트라는 용어자체는 웹페이지가 사용자에게 보여지는 영역을 말한다.

영역은 사이즈를 말하는건데 디바이스에서 사용하는 브라우저의 스팩에 따라 이 영역이 다르다.

웹킷 기반 브라우저 뷰포트는 980픽셀이고 아이폰 사파리 브라우저의 뷰포트는 320픽셀이다.

현업에서는 “뷰포트 설정 했어?” 라든지 어떠한 설정의 의미로 사용하는데 정확히는 뷰포트 메타태그를 말한다.

<meta name="viewport" content="width=device-width, user-scalable=no" />

이러한 태그를 의미한다. 신규 프로젝트에서 위와 같은 메타설정을 빠뜨리면 모바일 환경에서 페이지를 봤을때 굉장히 축소된 상태로 화면이 보여지게 된다.

두가지에 이유가 합쳐져 이러한 현상이 일어난다.

위에서 설명한 뷰포트(영역)가 디바이스에 따라 다르므로

모바일 브라우저는 웹페이지를 풀브라우징 하므로

모바일 환경에서도 데스크탑 환경처럼 웹화면 전체를 브라우징할 수 있는 환경을 말한다.

풀브라우징이 아니라면 스마트폰에서는 320px에 맞는 부분만 표시하고 나머지 부분은 스크롤로 보게끔 되므로 사용자의 가독성을 떨어뜨린다.

작은 화면의 스마트폰에 풀브라우징을 하려면 전체적인 페이지 배율 조정이 가해지는데

이러한 이유로 전체화면이 브라우징되지만 컨텐츠가 작아지게 되는것이다.

마치 팔만대장경을 스마트 웟치에 구겨넣어서 보는것과 비슷한 상황이다.

다시한번 뷰포트의 메타태그 설정을 보자

<meta name="viewport" content="width=device-width, user-scalable=no" />

width=device-width의 의미는 viewport를 디바이스의 width에 맞추겠다는 얘기다.

이 설정에 의해 모바일 환경에서는 320px이 viewport

이렇게 설정하면 뷰포트의 가로 너비와 단말기의 가로너비가 동일하기 때문에 페이지의 배율 조정이 일어나지 않고 320 너비 만큼만 브라우저에 표시된다

https://offbyone.tistory.com/110