AgentSkillsCN

mobile-ui-optimization

针对智能手机（包括iPhone 16/17/18 Pro）优化移动端UI。适用于构建响应式布局、触控界面、移动端视口、安全区域，或当用户提及移动端、智能手机、iPhone、响应式设计，或触控目标时使用。

SKILL.md
--- frontmatter
name: mobile-ui-optimization
description: Optimizes mobile UI for smartphones including iPhone 16/17/18 Pro. Use when building responsive layouts, touch interfaces, mobile viewports, safe areas, or when user mentions mobile, smartphone, iPhone, responsive design, or touch targets.

Mobile UI Optimization

Quick Reference

Viewport Setup

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

Safe Areas (iPhone Dynamic Island & Notch)

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

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 */
}

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

Tailwind Breakpoints

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

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)

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

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)

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

Detailed Guides