Ipad适配问题

client/app/(splash)/splash.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Platform, Alert, Image } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Platform, Alert, Image, useWindowDimensions } from 'react-native';
 import { useRouter } from 'expo-router';
 import * as WebBrowser from 'expo-web-browser';
 import { Trans, useTranslation } from 'react-i18next';
@@ -14,8 +14,6 @@ import { isTraditionalChineseLocaleTag } from '@/src/i18n/locale';
 import FlowersBg from '../../assets/images/index/flowers_endbg.svg';
 import WelcomeBtn from '../../assets/images/index/welcome_btn.svg';
 
-const { width, height } = Dimensions.get('window');
-
 // 繁中開屏 consent 文案：寫死在元件內，避免 Metro/iOS bundle 快取導致永遠顯示舊文案。
 // 若需修改，請改這裡並同步 client/src/i18n/locales/zh-TW.json 的 consent 區塊。
 const ZH_TW_CONSENT = {
@@ -27,7 +25,9 @@ const ZH_TW_CONSENT = {
 export default function SplashScreen() {
   const router = useRouter();
   const { t, i18n } = useTranslation();
+  const { width, height } = useWindowDimensions();
   const [showConsent, setShowConsent] = useState(false);
+  const isTablet = Platform.OS === 'ios' && Math.min(width, height) >= 768;
 
   // 繁中時強制使用上方常數（含 zh-TW / zh-Hant / zh-Hant-TW），其餘用 i18n
   const isZhTW = isTraditionalChineseLocaleTag(i18n.language || '');
@@ -127,52 +127,67 @@ export default function SplashScreen() {
     void refreshLegalLinks();
   }, []);
 
-  const bgDecorationTop = 363;
-  const bgDecorationHeight = height * 0.6;
+  const bgDecorationHeight = isTablet ? Math.round(height * 0.55) : height * 0.6;
+  const bgDecorationTop = height - bgDecorationHeight;
   const contentTop = bgDecorationTop + (bgDecorationHeight * 0.25);
+  const contentWidth = isTablet ? Math.min(640, Math.floor(width * 0.76)) : width;
+  const topImageWidth = isTablet ? Math.min(430, Math.floor(width * 0.48)) : 308;
+  const topImageHeight = isTablet ? Math.min(460, Math.floor(height * 0.45)) : 354;
+  const topImageMarginTop = isTablet ? 148 : 60;
+  const bgWidth = width + 10;
+  const bgLeft = -3;
+  const buttonSize = isTablet ? { width: 108, height: 70 } : { width: 87, height: 57 };
+  const bottomOffset = isTablet ? 28 : 60;
+  const buttonBottomGap = isTablet ? 28 : 40;
+  const noticeStyle = isTablet
+    ? { fontSize: 14, lineHeight: 20, paddingHorizontal: 32, maxWidth: contentWidth }
+    : null;
+  const noticeLinkStyle = isTablet ? { fontSize: 14 } : null;
+  const titleStyle = isTablet ? { fontSize: 50, lineHeight: 60 } : null;
+  const subtitleStyle = isTablet ? { marginTop: 10, fontSize: 18, lineHeight: 24 } : null;
 
   return (
     <View style={styles.container}>
       {/* 中间的背景装饰 SVG (现在放在上面，作为上层) */}
-      <View style={[styles.bgDecorationContainer, { top: bgDecorationTop }]}>
-        <FlowersBg width={width + 10} height={bgDecorationHeight} />
+      <View style={[styles.bgDecorationContainer, { bottom: 0, left: bgLeft }]}>
+        <FlowersBg width={bgWidth} height={bgDecorationHeight} preserveAspectRatio="none" />
       </View>
 
       {/* 顶部的花图片 (现在放在下面，作为下层) */}
-      <View style={styles.topImageContainer}>
+      <View style={[styles.topImageContainer, { marginTop: topImageMarginTop }]}>
         <Image
           source={require('../../assets/images/index/index_flowers.png')}
-          style={styles.topImage}
+          style={[styles.topImage, { width: topImageWidth, height: topImageHeight }]}
           resizeMode="contain"
         />
       </View>
 
       {/* 文案内容：主標題兩行 + 可選二級標題（字號更小、顏色更淺）；繁中為元件內常數，其餘用 i18n */}
-      <View style={[styles.contentContainer, { position: 'absolute', top: contentTop }]}>
-        <Text style={styles.titleText}>
+      <View style={[styles.contentContainer, { position: 'absolute', top: contentTop, width: contentWidth }]}>
+        <Text style={[styles.titleText, titleStyle]}>
           {title}
           {'\n'}
           {subtitle}
         </Text>
         {subtitleSecondary ? (
-          <Text style={styles.consentSubtitleSecondary}>{subtitleSecondary}</Text>
+          <Text style={[styles.consentSubtitleSecondary, subtitleStyle]}>{subtitleSecondary}</Text>
         ) : null}
       </View>
 
-      <SafeAreaView style={styles.bottomContainer} edges={['bottom']}>
+      <SafeAreaView style={[styles.bottomContainer, { bottom: bottomOffset, width: contentWidth }]} edges={['bottom']}>
         {showConsent && (
           <>
             <TouchableOpacity
               onPress={handleAgree}
               activeOpacity={0.8}
-              style={styles.buttonWrapper}
+              style={[styles.buttonWrapper, { marginBottom: buttonBottomGap }]}
               accessibilityRole="button"
               accessibilityLabel={t('consent.agree')}
             >
-              <WelcomeBtn width={87} height={57} />
+              <WelcomeBtn width={buttonSize.width} height={buttonSize.height} />
             </TouchableOpacity>
 
-            <Text style={styles.noticeText}>
+            <Text style={[styles.noticeText, noticeStyle]}>
               <Trans
                 i18nKey="consent.noticeRich"
                 values={{
@@ -184,14 +199,14 @@ export default function SplashScreen() {
                 components={{
                   privacy: (
                     <Text
-                      style={[styles.noticeLinkText, !links.privacy && styles.noticeLinkTextDisabled]}
+                      style={[styles.noticeLinkText, noticeLinkStyle, !links.privacy && styles.noticeLinkTextDisabled]}
                       onPress={() => void handleOpenLegal('privacy')}
                       suppressHighlighting
                     />
                   ),
                   terms: (
                     <Text
-                      style={[styles.noticeLinkText, !links.terms && styles.noticeLinkTextDisabled]}
+                      style={[styles.noticeLinkText, noticeLinkStyle, !links.terms && styles.noticeLinkTextDisabled]}
                       onPress={() => void handleOpenLegal('terms')}
                       suppressHighlighting
                     />
@@ -209,11 +224,13 @@ export default function SplashScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    width: '100%',
+    height: '100%',
+    alignSelf: 'stretch',
     backgroundColor: '#F5D3B5', // 匹配 Figma 背景色
     alignItems: 'center',
   },
   topImageContainer: {
-    marginTop: 60,
     zIndex: 1, // 降低层级
   },
   topImage: {
@@ -222,7 +239,6 @@ const styles = StyleSheet.create({
   },
   bgDecorationContainer: {
     position: 'absolute',
-    left: -3,
     zIndex: 2, // 提高层级，使其覆盖在图片之上
   },
   contentContainer: {
@@ -247,8 +263,6 @@ const styles = StyleSheet.create({
   },
   bottomContainer: {
     position: 'absolute',
-    bottom: 60,
-    width: '100%',
     alignItems: 'center',
     zIndex: 4,
   },