실행 가능한 HTML 문서: meta viewport

Q: 표준 meta viewport 태그는 무엇인가요?

에 넣는 이에요. 거의 모든 반응형 페이지에 알맞은 선택이에요.

Q: meta viewport가 왜 동작하지 않나요?

태그가 에 있는지, name이 viewport인지, 값이 쉼표로 구분되어 있는지 확인하세요. 그래도 페이지가 옆으로 스크롤된다면 고정 너비, 큰 이미지, 긴 단어처럼 화면보다 넓은 요소가 있는 거예요. 기기보다 넓은 CSS는 이 태그로 고칠 수 없어요.

써야 할 태그

모든 페이지의 <head>에 이 줄을 넣으세요.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width는 레이아웃을 화면만큼 넓게 만들고, initial-scale=1은 페이지를 100% 배율로 열어요. 대부분의 사이트에는 이걸로 충분해요. 태그를 넣은 전체 페이지는 이래요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

스크립트가 태그와 레이아웃 너비를 읽어요. 데스크톱 브라우저는 viewport 태그를 무시하기 때문에, 이 미리보기에서 너비는 그냥 미리보기 상자의 너비예요. 휴대폰에서는 태그 덕분에 같은 파일이 휴대폰의 너비(보통 360~430 CSS 픽셀)를 보고해요.

이 태그가 없을 때 휴대폰이 하는 일

viewport 태그를 찾지 못한 모바일 브라우저는 페이지가 데스크톱용으로 만들어졌다고 가정해요. 페이지를 약 980픽셀 너비로 배치한 다음, 전체를 화면에 맞게 축소해요. 아래 가짜 휴대폰 두 대는 같은 페이지를 불러오는데, 하나는 980px, 하나는 휴대폰 너비로 배치한 뒤 같은 크기로 축소했어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

첫 번째 휴대폰에서는 16px 텍스트가 아주 작아져서 독자가 손가락으로 확대해야 해요. 두 번째에서는 읽을 수 있는 크기가 유지되고, @media (max-width: 600px) 규칙이 적용되어 열이 세로로 쌓여요. 이게 이 태그의 두 번째 역할이에요. 미디어 쿼리는 레이아웃 너비를 봐요. 그래서 태그가 없으면 휴대폰이 980px로 보고하고, 모바일 스타일은 절대 적용되지 않아요. show('with', 375)에서 375를 980으로 바꾸면 두 휴대폰이 똑같아 보여요.

태그는 일의 절반이에요

viewport 태그는 좁은 레이아웃을 줄 뿐이고, 그 안에 맞추는 건 CSS의 몫이에요. 화면보다 넓은 고정 너비 요소 하나가 페이지 전체를 옆으로 스크롤되게 만들어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

첫 번째 상자는 옆으로 스크롤되고, 두 번째는 알맞게 줄어들어요. 이미지와 그 밖의 넓은 요소에는 max-width: 100%를 주고, 고정 픽셀 너비보다 유연한 너비(퍼센트, fr, flexbox)를 쓰세요.

viewport 값

값	예	하는 일
`width`	`width=device-width`	레이아웃 너비. `device-width`는 CSS 픽셀 단위의 화면 너비예요. 숫자도 쓸 수 있지만 좋은 선택인 경우는 드물어요.
`initial-scale`	`initial-scale=1`	페이지가 열릴 때의 배율.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	확대 한계. 최댓값이 낮으면 확대를 막으니, `maximum-scale`은 빼세요.
`user-scalable`	`user-scalable=yes`	손가락 확대 허용 여부. 빼세요.
`viewport-fit`	`viewport-fit=cover`	페이지가 노치나 둥근 모서리 아래까지 확장되게 해요. `env(safe-area-inset-*)` padding과 함께 써요.
`interactive-widget`	`interactive-widget=resizes-content`	화면 키보드가 레이아웃에 주는 영향. Android의 Chrome에서 지원해요.

값은 쉼표로 구분해요. 노치가 있는 휴대폰에서 화면 전체를 채우는 페이지는 이렇게 생겼어요.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

확대를 막지 마세요

오래된 템플릿에서 이런 태그를 볼 수 있어요.

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

이 태그는 저시력 사용자가 의존하는 손가락 확대를 막고, Lighthouse 같은 접근성 검사 도구가 문제로 표시해요. iOS의 Safari는 user-scalable=no를 무시하니 일관되게 동작하지도 않아요. iPhone에서 입력 필드를 탭했을 때 화면이 확대된다면 원인은 input의 글자 크기가 16px 미만이기 때문이에요. 확대를 끄는 대신 input의 font-size를 최소 16px로 설정하세요.

자주 하는 실수

태그를 빼먹음. 이 태그가 없으면 미디어 쿼리가 980px 레이아웃을 보기 때문에 휴대폰에서 반응형 스타일시트가 아무 효과가 없어요. 페이지 템플릿에서 title 태그 옆에 넣으세요.
값 사이에 세미콜론을 씀. 쉼표를 쓰세요. width=device-width, initial-scale=1처럼요.
width=375처럼 너비를 하드코딩함. 화면은 제각각이에요. device-width를 쓰세요.
user-scalable=no나 maximum-scale=1로 확대를 막음.
옆으로 스크롤되는 걸 태그 탓으로 돌림. 화면보다 넓은 요소를 찾아서 유연한 너비를 주세요.

자주 묻는 질문

meta viewport 태그는 무슨 일을 하나요?

모바일 브라우저에 레이아웃 너비를 얼마로 할지 알려 줘요. 이 태그가 없으면 대부분의 휴대폰은 페이지를 약 980 CSS 픽셀 너비로 배치한 뒤 화면에 맞게 축소해요. width=device-width가 있으면 레이아웃이 화면 너비와 같아져서 텍스트를 읽을 수 있고 미디어 쿼리가 동작해요.

표준 meta viewport 태그는 무엇인가요?

<head>에 넣는 <meta name="viewport" content="width=device-width, initial-scale=1">이에요. 거의 모든 반응형 페이지에 알맞은 선택이에요.

meta viewport가 왜 동작하지 않나요?

태그가 <head>에 있는지, name이 viewport인지, 값이 쉼표로 구분되어 있는지 확인하세요. 그래도 페이지가 옆으로 스크롤된다면 고정 너비, 큰 이미지, 긴 단어처럼 화면보다 넓은 요소가 있는 거예요. 기기보다 넓은 CSS는 이 태그로 고칠 수 없어요.

user-scalable=no나 maximum-scale=1을 써도 되나요?

안 돼요. 둘 다 확대를 막는데, 저시력 사용자 다수가 확대에 의존하고 접근성 검사에서도 실패해요. 게다가 iOS의 Safari는 user-scalable=no를 무시해요.

meta viewport 태그가 데스크톱 브라우저에도 영향을 주나요?

아니요. 데스크톱 브라우저는 이 태그를 무시하고, 거기서 레이아웃 너비는 그냥 창 너비예요. 이 태그는 휴대폰과 태블릿에서 중요해요.