mobile-principles

# Mobile Principles > Touch-first UX context. Loaded when mobile is detected (web mobile, iOS, Android). > Concise rules here. Deep-dive in `references/`. --- ## Touch Targets | Platform | Minimum | Recommended | Spec | |---|---|---|---| | Apple iOS | 44pt | 44pt + 8pt spacing | Apple HIG | | Android | 48dp | 48dp + 8dp spacing | Material Design | | Web mobile | 44px | 44px + 8px spacing | WCAG 2.5.5 | **Rule of thumb:** any tap target smaller than the platform minimum is a usability bug, period. The hit area can extend beyond the visible glyph (use padding, `hitSlop`, or a transparent inner spacer), but the *interactive* surface must reach the minimum. Spacing matters as much as size: two 44pt buttons touching edges are still mistappable. --- ## No-Hover Doctrine `:hover` does not exist on touch. Treating it as a primary trigger means hidden affordances on every phone. Anything reachable only by hover is, on mobile, simply gone. Visible-by-default is the rule; hover styles are a desktop *enhancement*, never a load-bearing interaction. **CSS - gate hover styles behind a media query:** ```css .card { opacity: 1; transform: translateY(0); } @media (hover: hover) and (pointer: fine) { .card { opacity: 0.85; } .card:hover { opacity: 1; transform: translateY(-2px); } } ``` **SwiftUI - tap and long-press, no pseudo-hover:** ```swift Image(systemName: "heart") .onTapGesture { toggleLike() } .contextMenu { Button("Share", systemImage: "square.and.arrow.up", act...