移动端表单空间充足却需滚动的React应用问题求助

我开发了一个以React为前端的全栈应用，使用daisyUI和Tailwind CSS实现样式，已部署上线。该应用在桌面浏览器中显示正常，但在iPhone 12 mini、iPhone XR等移动设备上，/sign-in路径的登录表单（及其他所有表单）无法完整显示，必须滚动才能查看全部内容。此前在笔记本电脑上遇到过相同问题，通过将表单外层div的min-h-screen改为h-full解决，但移动端该方法无效。我尝试注释掉占用屏幕空间的登录标题h1，也未改善问题。

相关代码 #

Signin.tsx #

return (
    <div className="relative flex flex-col items-center justify-center w-full h-full text-base-content gap-4">
        {/*<h1 className="text-3xl font-bold text-center mb-8 text-primary">{t.signin.signin}</h1>*/}
        {alertType && (
            <Alert key={alertKey} type={alertType} message={alertMessage}/>
        )}
        <div className="form-control w-full max-w-xs p-8 bg-base-200 shadow-xl rounded-lg">
            <FormInput label={t.signin.email}
                       type="email" placeholder=""
                       value={email}
                       onChange={e => setEmail(e.target.value)}/>
            <FormInput label={t.signin.password}
                       type="password"
                       placeholder=""
                       value={password}
                       onChange={e => setPassword(e.target.value)}/>
            <Link to="/password-forgot"
                  className="mt-2 text-blue-500 hover:text-blue-700">{t.signin.forgotPassword}</Link>
            <Button className="btn-primary mt-4"
                    onClick={handleSubmit}
                    text={t.signin.signin}/>
            <Button className="btn-outline mt-4 flex items-center justify-center"
                    onClick={handleGoogleSignIn}
                    text="">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 488 512"
                     className="w-6 h-6 mr-2">
                    PATH HERE
                </svg>
                {t.signin.signInWithGoogle}
            </Button>
            <div className="mt-6 text-center">
                <p className="mt-2">{t.signin.noAccount}</p>
                <Link to="/sign-up" className="text-blue-500 hover:text-blue-700">{t.signin.signup}</Link>
            </div>
        </div>
    </div>
);

Navbar.tsx #

return (
    <div className="navbar bg-base-200">
        <div className="flex-1">
            <a className="btn text-xl" onClick={() => handleLogo()}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="w-6 h-6 mr-1">
                    PATH HERE
                </svg>
                Cashflash
            </a>
        </div>
        <div className="flex-none hidden md:flex">
            <label className="swap swap-rotate mr-4">
                <input type="checkbox" onChange={toggleLanguage} checked={language == 'en'}/>
                <svg className="swap-off fill-current w-8 h-8" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 512 512">
                    PATH HERE
                </svg>
                <svg className="swap-on fill-current w-8 h-8" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 512 512">
                    PATH HERE
                </svg>
            </label>
            <label className="swap swap-rotate mr-4">
                <input type="checkbox" className="theme-controller" onChange={toggleTheme}
                       checked={theme === 'light'}/>
                <svg className="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24">
                    PATH HERE
                </svg>
                <svg className="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24">
                    PATH HERE
                </svg>
            </label>
            {!isSignedIn ? (
                <>
                    <Button className="btn-neutral text-xs sm:text-sm px-2 sm:px-4 mr-2" onClick={handleSignIn}
                            text={t.navbar.signin}/>
                </>
            ) : (
                <div className="dropdown dropdown-end">
                    <div tabIndex={0} role="button" className="btn btn-circle mr-6">
                        <div className="w-8">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                 viewBox="0 0 448 512">
                                PATH HERE
                            </svg>
                        </div>
                    </div>
                    <ul tabIndex={0}
                        className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-300 rounded-box w-52">
                        <li><a onClick={handleSettings}>{t.navbar.settings}</a></li>
                        <li><a onClick={handleSignout}>{t.navbar.signout}</a></li>
                    </ul>
                </div>
            )}
        </div>
        <div className="flex md:hidden">
            <label className="swap swap-rotate mr-4">
                <input type="checkbox" className="theme-controller" onChange={toggleTheme}
                       checked={theme === 'light'}/>
                <svg className="swap-off fill-current w-9 h-9" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24">
                    PATH HERE
                </svg>
                <svg className="swap-on fill-current w-9 h-9" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24">
                    PATH HERE
                </svg>
            </label>
            <div className="dropdown dropdown-end">
                <div tabIndex={0} role="button" className="btn btn-circle mr-3">
                    <div className="w-7">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                             viewBox="0 0 448 512">
                            PATH HERE
                        </svg>
                    </div>
                </div>
                <ul tabIndex={0}
                    className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-300 rounded-box w-52 z-50">
                    {!isSignedIn ? (
                        <>
                            <li><a onClick={handleSignIn}>{t.navbar.signin}</a></li>
                            <li><a onClick={handleLanguageTextClick}>PL / EN</a></li>
                        </>
                    ) : (
                        <div className="dropdown dropdown-end">
                            <ul>
                                <li><a onClick={handleSettings}>{t.navbar.settings}</a></li>
                                <li><a onClick={handleSignout}>{t.navbar.signout}</a></li>
                                <li><a onClick={handleLanguageTextClick}>PL / EN</a></li>
                            </ul>
                        </div>
                    )}
                </ul>
            </div>
        </div>
    </div>
);

App.tsx #

return (
    <Router>
        <LanguageProvider>
            <ThemeProvider>
                <AuthProvider>
                    <CsrfProvider>
                        <div className="flex flex-col min-h-screen">
                            <Navbar/>
                            <Routes>
                                <Route path="/" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <Cashflash/>
                                    </div>
                                }/>
                                <Route path="/sign-in" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <Signin/>
                                    </div>
                                }/>
                                <Route path="/sign-up" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <Signup/>
                                    </div>
                                }/>
                                <Route path="/confirm-email" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <ConfirmEmail/>
                                    </div>
                                }/>
                                <Route path="/settings" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <Settings/>
                                    </div>
                                }/>
                                <Route path="/default-theme" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <DefaultTheme/>
                                    </div>
                                }/>
                                <Route path="/default-language" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <DefaultLanguage/>
                                    </div>
                                }/>
                                <Route path="/password-change" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <PasswordChange/>
                                    </div>
                                }/>
                                <Route path="/delete-account" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <DeleteAccount/>
                                    </div>
                                }/>
                                <Route path="/password-forgot" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <PasswordForgot/>
                                    </div>
                                }/>
                                <Route path="/password-reset" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <PasswordReset/>
                                    </div>
                                }/>
                                <Route path="/investment-calculator" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <InvestmentCalculatorForm/>
                                    </div>
                                }/>
                                <Route path="/investment-calculator-results" element={
                                    <div className="flex-grow flex items-center justify-center">
                                        <InvestmentCalculatorResults/>
                                    </div>
                                }/>
                            </Routes>
                        </div>
                    </CsrfProvider>
                </AuthProvider>
            </ThemeProvider>
        </LanguageProvider>
    </Router>
)

问题截图说明 #

• 截图1：移动端登录表单底部内容被屏幕截断
• 截图2：移动端需滚动页面才能查看表单完整内容

内容的提问来源于stack exchange，提问作者Kajetan Lewkowicz