We've all done it: build the interface on a 1440px screen, drag the window to shrink it, decide it "looks fine", and ship to production. Two days later, a user reports that the submit button is too small to tap, that justified text looks like swiss cheese on their iPhone SE, and that the login form triggers automatic Safari zoom. All of it avoidable. In 2026, mobile accounts for over 60% of global web traffic. It's no longer an edge case — it's the primary case. Here are the concrete CSS rules, organized by theme. No theory: code that works and explanations for why the alternative fails. Viewport and document base Before any CSS, the meta viewport tag in the <head> . Without it, mobile browsers simulate a desktop screen and reduce zoom — all responsive CSS becomes useless. <meta name= "viewport" content= "width=device-width, initial-scale=1" > Enter fullscreen mode Exit fullscreen mode Do not add user-scalable=no or maximum-scale=1 .…
