mobile-feel

A phone is not a small desktop. The pointer is a thumb, the viewport moves, the keyboard eats half the screen, and every mistake is felt in the hand.

Targets

• 44×44px minimum for anything tappable, even if it draws at 20px. Extend the hit area with padding or a pseudo-element, not by making the icon bigger.
• 8px minimum between adjacent targets.
• Primary actions in the bottom third of the screen, where a thumb rests. Destructive actions away from it.
• Rows are the target, not the text inside them.

Viewport

• 100dvh, never 100vh. vh includes the browser chrome; dvh is what is actually visible. Use svh for things that must not resize when the chrome hides.
• <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. viewport-fit=cover unlocks safe-area insets. Never user-scalable=no or maximum-scale=1.
• Safe areas on every fixed or sticky edge element: