diff --git a/app/globals.css b/app/globals.css
index 0e918bf..32576a1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -307,6 +307,6 @@ body {
   }
 }
 
-textarea, input {
+.mobile-textarea, .mobile-input {
   font-size: 16px !important;
 }
\ No newline at end of file
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index 33808c6..157a35d 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -9,6 +9,7 @@ import { GoogleLoginButton } from "@/components/ui/google-login-button";
 import { Eye, EyeOff, Mail, PartyPopper } from "lucide-react";
 import { isGoogleLoginEnabled } from "@/lib/server-config";
 import { fetchSettingByCode } from "@/api/serversetting";
+import { useDeviceType } from "@/hooks/useDeviceType";
 
 export default function SignupPage() {
   const [name, setName] = useState("");
@@ -31,7 +32,7 @@ export default function SignupPage() {
   const [showGoogleLogin, setShowGoogleLogin] = useState(false);
   const [showRedirectModal, setShowRedirectModal] = useState(false);
   const router = useRouter();
-
+  const { isMobile } = useDeviceType();
   // Handle scroll indicator for small screens and load SSO config
   React.useEffect(() => {
     try {
@@ -448,7 +449,7 @@ export default function SignupPage() {
                 onFocus={() => setEmailFocused(true)}
                 onBlur={() => setEmailFocused(false)}
                 required
-                className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80"
+                className={`w-full px-4 py-3 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${isMobile ? 'mobile-input' : ''}`}
               />
             </div>
 
@@ -473,7 +474,7 @@ export default function SignupPage() {
                   required
                   className={`w-full px-4 py-3 pr-12 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${
                     passwordError ? "border-red-500/50" : "border-white/20"
-                  }`}
+                  } ${isMobile ? 'mobile-input' : ''}`}
                 />
                 <button
                   type="button"
diff --git a/components/ChatInputBox/ChatInputBox.tsx b/components/ChatInputBox/ChatInputBox.tsx
index 86ac272..15be0b8 100644
--- a/components/ChatInputBox/ChatInputBox.tsx
+++ b/components/ChatInputBox/ChatInputBox.tsx
@@ -356,7 +356,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                 value={script}
                 onChange={(e) => setScript(e.target.value)}
                 placeholder="Describe the story you want to make..."
-                className={`w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none overflow-y-auto transition-all duration-300 ease-in-out ${isMobile ? '' : 'max-h-[120px]'}`}
+                className={`w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none overflow-y-auto transition-all duration-300 ease-in-out ${isMobile ? 'mobile-textarea' : 'max-h-[120px]'}`}
                 style={{
                   minHeight: noData ? "128px" : (isMobile ? (isInputFocused ? "96px" : "48px") : "unset"),
                   maxHeight: isMobile ? (isInputFocused ? "200px" : (persistedMobileMaxHeight ? `${persistedMobileMaxHeight}px` : "120px")) : undefined,
diff --git a/components/ChatInputBox/H5PhotoStoryDrawer.tsx b/components/ChatInputBox/H5PhotoStoryDrawer.tsx
index 2e46551..85d796b 100644
--- a/components/ChatInputBox/H5PhotoStoryDrawer.tsx
+++ b/components/ChatInputBox/H5PhotoStoryDrawer.tsx
@@ -305,7 +305,7 @@ export const H5PhotoStoryDrawer = ({
                               updateCharacterName(avatar.name, newName);
                             }
                           }}
-                          className="w-full max-w-[72px] md:max-w-[80px] text-center text-xs md:text-sm text-white/80 bg-transparent border-none outline-none focus:ring-1 focus:ring-blue-400/50 rounded px-1 py-0.5"
+                          className="w-full max-w-[72px] md:max-w-[80px] text-center text-xs md:text-sm text-white/80 bg-transparent border-none outline-none focus:ring-1 focus:ring-blue-400/50 rounded px-1 py-0.5 mobile-input"
                         />
                       </div>
                     ))}
diff --git a/components/ChatInputBox/H5TemplateDrawer.tsx b/components/ChatInputBox/H5TemplateDrawer.tsx
index 5d0b843..8f2bea5 100644
--- a/components/ChatInputBox/H5TemplateDrawer.tsx
+++ b/components/ChatInputBox/H5TemplateDrawer.tsx
@@ -276,7 +276,7 @@ export const H5TemplateDrawer = ({
                           setSelectedTemplate(updatedTemplate);
                         }}
                         placeholder={role.user_tips}
-                        className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
+                        className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
                       />
                       <div className="absolute right-2 top-1/2 -translate-y-1/2">
                         <ActionButton
@@ -404,7 +404,7 @@ export const H5TemplateDrawer = ({
                           setSelectedTemplate(updatedTemplate);
                         }}
                         placeholder="Enter description for AI image generation..."
-                        className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
+                        className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
                       />
                       <div className="absolute right-2 top-1/2 -translate-y-1/2">
                         <ActionButton
@@ -576,7 +576,7 @@ export const H5TemplateDrawer = ({
               data-alt="h5-template-free-input-top"
               value={selectedTemplate?.freeInput[0].free_input_text || ""}
               placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
-              className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
+              className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-textarea"
               onChange={(e) => {
                 // 更新自由输入文字字段
                 const updatedTemplate = {
@@ -601,7 +601,7 @@ export const H5TemplateDrawer = ({
                 data-alt="h5-template-free-input-bottom"
                 value={selectedTemplate.freeInput[0].free_input_text || ""}
                 placeholder={selectedTemplate.freeInput[0].user_tips}
-                className="w-full px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
+                className="w-full px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
                 onChange={(e) => {
                   const updatedTemplate = {
                     ...selectedTemplate!,
diff --git a/components/SmartChatBox/InputBar.tsx b/components/SmartChatBox/InputBar.tsx
index ecea67d..bdc3a3a 100644
--- a/components/SmartChatBox/InputBar.tsx
+++ b/components/SmartChatBox/InputBar.tsx
@@ -286,7 +286,7 @@ const { isMobile, isTablet, isDesktop } = useDeviceType();
               <textarea
                 ref={textareaRef}
                 placeholder="Describe your idea..."
-                className="w-full pl-2 pr-2 py-4 rounded-2 leading-4 text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto"
+                className={`w-full pl-2 pr-2 py-4 rounded-2 leading-4 text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto ${isMobile ? 'mobile-textarea' : ''}`}
                 rows={1}
                 value={text}
                 onChange={(e) => setText(e.target.value)}
diff --git a/components/layout/H5TopBar.tsx b/components/layout/H5TopBar.tsx
index d458d66..b1e04b0 100644
--- a/components/layout/H5TopBar.tsx
+++ b/components/layout/H5TopBar.tsx
@@ -388,7 +388,7 @@ export default function H5TopBar({ onSelectHomeTab }: H5TopBarProps) {
                                                         value={customAmount}
                                                         onChange={(e) => setCustomAmount(e.target.value)}
                                                         placeholder="Custom amount"
-                                                        className="w-[120px] h-9 px-2 text-sm bg-white/10 text-black dark:text-white placeholder-black/40 dark:placeholder-white/60 border border-black/20 dark:border-white/20 rounded focus:outline-none"
+                                                        className="w-[120px] h-9 px-2 text-sm bg-white/10 text-black dark:text-white placeholder-black/40 dark:placeholder-white/60 border border-black/20 dark:border-white/20 rounded focus:outline-none mobile-input"
                                                         min={1}
                                                     />
                                                     <button
diff --git a/components/pages/login.tsx b/components/pages/login.tsx
index 74c7472..a1fa36c 100644
--- a/components/pages/login.tsx
+++ b/components/pages/login.tsx
@@ -11,6 +11,7 @@ import { GoogleLoginButton } from "@/components/ui/google-login-button";
 import { Eye, EyeOff } from "lucide-react";
 import { isGoogleLoginEnabled } from "@/lib/server-config";
 import Footer from "@/components/common/Footer";
+import { useDeviceType } from "@/hooks/useDeviceType";
 
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -26,7 +27,7 @@ export default function Login() {
   const [showGoogleLogin, setShowGoogleLogin] = useState(false);
   const router = useRouter();
   const searchParams = useSearchParams();
-
+  const { isMobile } = useDeviceType();
   /** 密码验证函数 */
   /**
    * Password validation function with English prompts
@@ -213,7 +214,7 @@ export default function Login() {
               <input
                 placeholder="Email"
                 required
-                className="form-control"
+                className={`form-control ${isMobile ? 'mobile-input' : ''}`}
                 type="text"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
@@ -236,8 +237,8 @@ export default function Login() {
                   placeholder="Password (8-18 characters, letters, numbers and !@#$%^*&.)"
                   required
                   className={`form-control pr-10 ${
-                    passwordError ? "border-red-500/50" : ""
-                  }`}
+                    passwordError ? "border-red-500/50" : "" 
+                  } ${isMobile ? 'mobile-input' : ''}`}
                   type={showPassword ? "text" : "password"}
                   value={password}
                   onChange={handlePasswordChange}