Back to Details

mobile-ui-optimization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Mobile UI Optimization

移动端UI优化

Quick Reference

快速参考

Viewport Setup

视口设置

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Safe Areas (iPhone Dynamic Island & Notch)

安全区域（iPhone灵动岛&刘海屏）

css
:root {
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
}

body {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}
css
:root {
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
}

body {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

Touch Target Minimums

触摸目标最小尺寸

  • Minimum size: 44×44px (Apple HIG) / 48×48dp (Material Design)
  • Recommended: 48×48px with 8px spacing between targets
  • Critical actions: 56×56px minimum
  • 最小尺寸：44×44px（Apple HIG）/ 48×48dp（Material Design）
  • 推荐尺寸：48×48px，目标之间保留8px间距
  • 关键操作：最小56×56px

Typography Scale

排版比例

css
:root {
  --text-xs: clamp(0.75rem, 2.5vw, 0.875rem);   /* 12-14px */
  --text-sm: clamp(0.875rem, 3vw, 1rem);        /* 14-16px */
  --text-base: clamp(1rem, 3.5vw, 1.125rem);    /* 16-18px */
  --text-lg: clamp(1.125rem, 4vw, 1.25rem);     /* 18-20px */
  --text-xl: clamp(1.25rem, 4.5vw, 1.5rem);     /* 20-24px */
  --text-2xl: clamp(1.5rem, 5vw, 2rem);         /* 24-32px */
}
css
:root {
  --text-xs: clamp(0.75rem, 2.5vw, 0.875rem);   /* 12-14px */
  --text-sm: clamp(0.875rem, 3vw, 1rem);        /* 14-16px */
  --text-base: clamp(1rem, 3.5vw, 1.125rem);    /* 16-18px */
  --text-lg: clamp(1.125rem, 4vw, 1.25rem);     /* 18-20px */
  --text-xl: clamp(1.25rem, 4.5vw, 1.5rem);     /* 20-24px */
  --text-2xl: clamp(1.5rem, 5vw, 2rem);         /* 24-32px */
}

Device Breakpoints

设备断点

DeviceWidthPixel Ratio
iPhone SE375px2x
iPhone 14/15/16390px3x
iPhone 14/15/16 Pro393px3x
iPhone 14/15/16 Plus428px3x
iPhone 14/15/16 Pro Max430px3x
iPhone 17/18 Pro (expected)393-402px3x
设备宽度像素比
iPhone SE375px2x
iPhone 14/15/16390px3x
iPhone 14/15/16 Pro393px3x
iPhone 14/15/16 Plus428px3x
iPhone 14/15/16 Pro Max430px3x
iPhone 17/18 Pro（预计）393-402px3x

Tailwind Breakpoints

Tailwind断点配置

js
// tailwind.config.js
screens: {
  'xs': '375px',    // iPhone SE, small phones
  'sm': '390px',    // iPhone 14/15/16 base
  'md': '430px',    // iPhone Pro Max, large phones
  'lg': '768px',    // Tablets
  'xl': '1024px',   // Desktop
}
js
// tailwind.config.js
screens: {
  'xs': '375px',    // iPhone SE, small phones
  'sm': '390px',    // iPhone 14/15/16 base
  'md': '430px',    // iPhone Pro Max, large phones
  'lg': '768px',    // Tablets
  'xl': '1024px',   // Desktop
}

Core Patterns

核心模式

1. Responsive Container

1. 响应式容器

tsx
<div className="w-full max-w-screen-sm mx-auto px-4 
  pt-[env(safe-area-inset-top)] 
  pb-[env(safe-area-inset-bottom)]">
  {children}
</div>
tsx
<div className="w-full max-w-screen-sm mx-auto px-4 
  pt-[env(safe-area-inset-top)] 
  pb-[env(safe-area-inset-bottom)]">
  {children}
</div>

2. Bottom Navigation (iOS Home Indicator Safe)

2. 底部导航栏（适配iOS Home Indicator）

tsx
<nav className="fixed bottom-0 left-0 right-0 
  bg-white border-t border-gray-200
  pb-[env(safe-area-inset-bottom)]">
  <div className="flex justify-around py-2">
    {/* Nav items with min-h-[44px] */}
  </div>
</nav>
tsx
<nav className="fixed bottom-0 left-0 right-0 
  bg-white border-t border-gray-200
  pb-[env(safe-area-inset-bottom)]">
  <div className="flex justify-around py-2">
    {/* Nav items with min-h-[44px] */}
  </div>
</nav>

3. Touch-Optimized Button

3. 触摸优化按钮

tsx
<button className="min-h-[44px] min-w-[44px] px-4 py-3
  active:scale-95 transition-transform
  touch-manipulation">
  {label}
</button>
tsx
<button className="min-h-[44px] min-w-[44px] px-4 py-3
  active:scale-95 transition-transform
  touch-manipulation">
  {label}
</button>

4. Scroll Container (Momentum Scrolling)

4. 滚动容器（支持动量滚动）

tsx
<div className="overflow-y-auto overscroll-contain
  -webkit-overflow-scrolling: touch
  scroll-snap-type-y-mandatory">
  {children}
</div>
tsx
<div className="overflow-y-auto overscroll-contain
  -webkit-overflow-scrolling: touch
  scroll-snap-type-y-mandatory">
  {children}
</div>

Critical Rules

关键规则

  1. NEVER use 
    user-scalable=no
    or 
    maximum-scale=1
    - breaks accessibility
  2. ALWAYS use 
    touch-manipulation
    on interactive elements to remove 300ms delay
  3. ALWAYS account for Dynamic Island/notch with 
    env(safe-area-inset-*)
  4. NEVER rely on hover states for critical interactions
  5. ALWAYS provide visible focus states for keyboard/assistive technology users
  1. 绝对不要使用
    user-scalable=no
    或
    maximum-scale=1
    ——这会破坏可访问性
  2. 务必在交互元素上使用
    touch-manipulation
    以消除300ms延迟
  3. 务必使用
    env(safe-area-inset-*)
    适配灵动岛/刘海屏
  4. 绝对不要依赖悬停状态实现关键交互
  5. 务必为键盘/辅助技术用户提供可见的焦点状态

Detailed Guides

详细指南

  • Viewport & Safe Areas: See VIEWPORT.md
  • Touch Interactions: See TOUCH.md
  • Typography & Readability: See TYPOGRAPHY.md
  • Performance: See PERFORMANCE.md
  • Forms & Inputs: See FORMS.md
  • Navigation Patterns: See NAVIGATION.md
  • Testing Checklist: See TESTING.md
  • 视口与安全区域：查看VIEWPORT.md
  • 触摸交互：查看TOUCH.md
  • 排版与可读性：查看TYPOGRAPHY.md
  • 性能优化：查看PERFORMANCE.md
  • 表单与输入框：查看FORMS.md
  • 导航模式：查看NAVIGATION.md
  • 测试清单：查看TESTING.md