Ipad适配问题

client/app/(app)/settings.tsx

@@ -1,9 +1,13 @@
 import Constants from 'expo-constants';
-import { StyleSheet, Text, View } from 'react-native';
+import { Platform, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';
+import { clampContentWidth, isIPadLike } from '@/src/utils/device';
 
 export default function SettingsScreen() {
   const { t } = useTranslation();
+  const { width, height } = useWindowDimensions();
+  const isTablet = isIPadLike(width, height);
+  const contentWidth = isTablet ? clampContentWidth(width, 720, 24) : undefined;
 
   const version =
     Constants.expoConfig?.version ??
@@ -12,6 +16,7 @@ export default function SettingsScreen() {
 
   return (
     <View style={styles.container}>
+      <View style={[styles.contentWrap, contentWidth ? { width: contentWidth } : null]}>
       <View style={styles.section}>
         <Text style={styles.label}>{t('settings.version')}</Text>
         <Text style={styles.value}>{version}</Text>
@@ -21,12 +26,18 @@ export default function SettingsScreen() {
         <Text style={styles.cardTitle}>{t('settings.widgetTitle')}</Text>
         <Text style={styles.cardText}>{t('settings.widgetDesc')}</Text>
       </View>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, padding: 16, gap: 16 },
+  container: { flex: 1, width: '100%', alignSelf: 'stretch', padding: 16 },
+  contentWrap: {
+    width: '100%',
+    alignSelf: 'center',
+    gap: 16,
+  },
   section: {
     borderRadius: 14,
     padding: 16,
@@ -38,7 +49,12 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   label: { color: '#374151', fontSize: 16 },
-  value: { color: '#111827', fontSize: 16, fontWeight: '600' },
+  value: {
+    color: '#111827',
+    fontSize: 16,
+    fontWeight: '600',
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : undefined,
+  },
   card: {
     borderRadius: 16,
     padding: 16,