To make an HTML app feel native, size every tap target to at least 48×48px, use 100dvh instead of 100vh, disable the blue tap highlight and accidental text selection on controls, stop the page bouncing with overscroll-behavior, respect safe areas, use the correct input types for the keyboard, give instant pressed states and keep transitions under 300ms.
Key takeaways
- Touch targets of 48×48 CSS pixels are Android's own guideline.
100dvhfixes layouts that jump when the browser UI or keyboard changes height.- Instant visual feedback on press matters more than any animation.
- Most fixes are one CSS line — the checklist takes under an hour.
The base stylesheet
Start with this block; each line is explained below.
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100dvh;
overscroll-behavior-y: none; /* no rubber-band bounce or accidental reloads */
-webkit-tap-highlight-color: transparent; /* no blue flash on tap */
font-family: system-ui, -apple-system, 'Roboto', sans-serif;
}
button, .btn, nav a { user-select: none; touch-action: manipulation; min-height: 48px; min-width: 48px; }
button:active, .btn:active { transform: scale(.97); filter: brightness(.95); }
img { max-width: 100%; height: auto; -webkit-user-drag: none; }
input, select, textarea { font-size: 16px; } /* readable, and avoids zoom-on-focus in browsers */
header { padding-top: env(safe-area-inset-top); }
footer, .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }The checklist
- Touch targets ≥ 48×48px. Android's accessibility guideline. Icon buttons are the usual offenders; pad them rather than enlarging the icon. Check with the touch target checker.
- Use
100dvh, not100vh. Dynamic viewport units follow the visible height, so full-height screens do not jump or get cut off. - Remove the tap highlight.
-webkit-tap-highlight-color: transparent, then add your own:activestyle so there is still feedback. - Stop text selection on controls. Long-pressing a button should not select its label. Keep selection on real content — people copy addresses and codes.
- No rubber-banding.
overscroll-behavior-y: noneon the body. If you want pull-to-refresh, let the app shell provide it. - Remove the 300ms delay feeling.
touch-action: manipulationon interactive elements disables double-tap-to-zoom handling. - Respect safe areas. With
viewport-fit=cover, pad headers and bottom bars withenv(safe-area-inset-*)so nothing hides under the camera cutout or gesture bar. - Right keyboard for each field.
type="email",type="tel",inputmode="decimal",enterkeyhint="search". See forms in an Android app. - Keep inputs visible above the keyboard. Do not put text fields in a fixed-position footer; call
el.scrollIntoView({block:'center'})on focus if your layout hides them. - System fonts or bundled fonts. No Google Fonts link — it fails offline. Bundle fonts or use
system-ui, which is Roboto or the maker's font on Android. - Follow dark mode. Android users switch themes; an app stuck in light mode at night looks foreign. Dark mode guide.
- Fast, short transitions. 150–250ms with
ease-out. Animatetransformandopacityonly; animatingheightortopstutters on budget phones. - Back button closes layers. Menus, sheets and dialogs should close on back before the page changes. How back works.
- No hover-dependent UI. Tooltips and hover menus never appear on touch. Use tap-to-toggle.
Performance on budget phones
Test on the cheapest Android phone you can find; that is what many of your users own. Common wins: serve images at the size they are displayed, prefer WebP, avoid large box-shadow and backdrop-filter on scrolling elements, and add loading="lazy" to images below the fold.
Contrast outdoors
Phones are used in sunlight. Body text should reach a 4.5:1 contrast ratio with its background; check your palette with the app colour contrast checker.
Frequently asked questions
Why does my HTML app look like a website?
Usually small things: tiny tap targets, a blue tap flash, selectable button labels, bouncing scroll, desktop fonts and hover menus. Fixing those changes the feel more than any redesign.
What is the right touch target size on Android?
Google's guideline is 48×48 density-independent pixels, which equals 48×48 CSS pixels in a WebView at normal zoom.