Making your app feel native on mobile (Emil Kowalski)
Emil Kowalski's cheat sheet of ten mobile web problems and their fixes, such as hover states that stick after a tap, wrong viewport heights and iOS input zoom.
Tweet by Emil Kowalski (the tricks were in an attached image, transcribed here):
| Problem | Solution |
|---|---|
| Hover state stuck after tap | Wrap in @media (hover: hover) and (pointer: fine) |
| Gray/blue flash on tap | Kill -webkit-tap-highlight-color |
| Layout was wrong height | 100dvh (app) or 100svh (hero) |
| Page zooms into input | Input’s font size should be 16px at the minimum |
| Tap feels laggy | Feedback on pointer-down + touch-action: manipulation |
| Pull-to-refresh hijacks scroll | overscroll-behavior: none on html, body |
| Content stops at the notch | viewport-fit=cover + env(safe-area-inset-*) |
| Long-press selects button text | Add user-select: none |
| Carousel scrolls vertically | touch-action: pan-y on the gesture surface |
| Status bar color doesn’t match | theme-color per color scheme |
| Right in chrome, wrong on phone | Test on real hardware! |
| Problem | Fix |
|---|---|
| Hover state stuck after tap | Wrap in @media (hover: hover) and (pointer: fine) |
| Gray/blue flash on tap | Kill -webkit-tap-highlight-color |
| Layout has wrong height | 100dvh (app) or 100svh (hero) |
| Page zooms into input | Input font size should be 16px at the minimum |
| Tap feels laggy | Feedback on pointer-down plus touch-action: manipulation |
| Pull-to-refresh hijacks scroll | overscroll-behavior: none on html, body |
| Content stops at the notch | viewport-fit=cover plus env(safe-area-inset-*) |
| Long-press selects button text | Add user-select: none |
| Carousel scrolls vertically | touch-action: pan-y on the gesture surface |
| Status bar color doesn’t match | theme-color per color scheme |
| Right in Chrome, wrong on phone | Test on real hardware |
Similar in the index
- Checklist Design Checklists for websites, web apps, mobile apps, components and flows.
- Departure Mono A monospaced pixel-style font that includes box-drawing characters.
- DesEngs A curated collection of resources for design engineers.
- Detail Curated reference of small design decisions that shape better interfaces.
- Interface Cheat Sheet Concise UI rules, for example making nested border radii concentric.