The small tells that give a page away
Users cannot name them, but they feel them: a blue rectangle flashes when you tap a button, the whole screen stretches when you scroll past the end, a long press on the logo offers to save the image, a double tap selects a word in the menu. Native apps do none of these. Each rule in the generator removes one.
Use with care
- Do not disable text selection on content people may want to copy — articles, addresses, order numbers.
- Overscroll is disabled on
html, body; inner scroll areas keep their own behaviour. The app's own pull-to-refresh is a builder setting, separate from the page's CSS. - Safe-area padding only has an effect with
viewport-fit=cover— see the viewport meta builder.
Questions people ask
How do I make a website feel like an app?
Use a proper viewport tag, remove the tap highlight and overscroll effects, keep controls unselectable, respect safe areas, use 48 px touch targets, and add native features such as a splash screen and bottom tabs in the app itself.
Will this CSS affect my website too?
Yes, if you add it to the shared stylesheet. All of these rules are harmless on a mobile website; scope them under a class such as .in-app if you prefer.