How to Make a Single HTML Page Mobile-Friendly

hdply · 2026-07-17

More than half of web traffic is on phones, and yet the single most common mistake in a hand-written HTML page is that it was only ever checked on a computer. The fixes are small and mostly boil down to "stop assuming the screen is wide."

Start with the viewport tag

If you add one thing, add this to your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, phones pretend to be a ~980px-wide desktop and shrink the whole page to fit, leaving everything tiny. This tag tells the browser to use the real device width. It fixes more mobile problems than any other single change.

Never set fixed pixel widths

A width: 900px container is 900px even on a 390px phone — so it overflows and forces horizontal scrolling. Use flexible limits instead:

.container { max-width: 720px; width: 100%; margin: 0 auto; padding: 0 1rem; }

max-width caps the size on big screens while letting it shrink on small ones. The same idea applies to images: img { max-width: 100%; height: auto; } stops a large photo from blowing out the layout.

Use relative units for text and spacing

Prefer rem and % over fixed px for font sizes and widths so things scale sensibly. Keep body text at least 16px so nobody has to pinch-zoom to read.

Rearrange with a media query

When a two-column layout is too tight on a phone, stack it. A media query applies CSS only below a certain width:

@media (max-width: 640px) {
  .row { flex-direction: column; }
  h1 { font-size: 1.6rem; }
}

This is the core of "responsive design": the same HTML, laid out differently at different sizes. Flexbox and CSS grid both reflow naturally, so you often need only a few of these tweaks.

Actually test it

Open your browser's device toolbar (in Chrome, right-click → Inspect → the phone icon) and check a few screen sizes. Better still, deploy the page and open it on your actual phone — on hdply you can edit and redeploy in seconds, so the fix-and-check loop is fast. Look for horizontal scrolling, text that's too small, and buttons too close to tap.