fix: zoom error

SSOCK · Nov 18, 2024 · 58f88dd · 58f88dd
1 parent da6b9e9
commit 58f88dd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/app/(protected)/nickname/_components/NicknameForm.tsx b/app/(protected)/nickname/_components/NicknameForm.tsx
@@ -97,7 +97,14 @@ const NicknameForm = ({ user }: { user: sessionUser }) => {
                 사용하실 이름을 입력해주세요
               </FormLabel>
               <FormControl>
-                <Input placeholder="Nickname" {...field} />
+                <Input
+                  onFocus={(e) => {
+                    // no zoom on mobile
+                    e.target.style.fontSize = '16px';
+                  }}
+                  placeholder="Nickname"
+                  {...field}
+                />
               </FormControl>
               <FormDescription>
                 이 이름은 다른 사용자들에게 보여지는 이름이 됩니다.

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import Head from 'next/head';
 import { Jua } from 'next/font/google';
 import './globals.css';
 
@@ -24,12 +25,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <head>
+      <Head>
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+          content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"
         />
-      </head>
+      </Head>
 
       <body className={cn(inter.className, 'min-h-svh bg-primary')}>
         <QueryProvider>