index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <!-- viewport-fit=cover: 페이지를 노치·홈 인디케이터 밑까지 펼친다. 이게 없으면 브라우저가
         알아서 안전 영역 안으로 잘라 넣고, 그 대신 env(safe-area-inset-*)이 항상 0이 된다.
         펼친 만큼 피하는 건 우리 책임이 되며 index.css의 safe-area 유틸이 담당한다. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />
    <!-- iOS는 focus된 입력칸 글자가 16px 미만이면 화면을 자동 확대하고, PWA에서는 그 배율이
         돌아오지 않는다. maximum-scale=1은 그 자동 확대를 막는다(Safari는 이 값으로 사용자의
         두 손가락 확대까지 막지는 않는다). Android Chrome은 이 값으로 사용자 확대가 막혀 접근성이
         나빠지므로 iOS(iPadOS 포함)에서만 붙인다. 입력칸 글자는 Figma 크기 그대로 둔다. -->
    <script>
      if (
        /iPad|iPhone|iPod/.test(navigator.userAgent) ||
        (navigator.userAgent.includes("Macintosh") && navigator.maxTouchPoints > 1)
      ) {
        const viewport = document.querySelector('meta[name="viewport"]');
        viewport.content += ", maximum-scale=1";
      }
    </script>
    <title>stream-client</title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
    <link
      rel="stylesheet"
      as="style"
      crossorigin
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-jp-dynamic-subset.min.css"
    />
    <link
      rel="stylesheet"
      as="style"
      crossorigin
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>