Fixes7 min read·28 September 2026

Why your website looks zoomed out on phones (and fixes)

Website looks tiny and zoomed out on mobile? It's almost always a missing viewport tag or something wider than the screen. Here's how to find and fix it.

If your site looks like a tiny desktop page on a phone, the browser is laying it out wider than the screen and shrinking it to fit. The usual cause is a missing or wrong meta viewport tag. The second most common cause is one element that's wider than the screen and drags the whole page wider with it. Both take minutes to fix once you know which one you've got.

Which "zoomed out" have you got?

Start by matching what you see:

What you see on the phone	Most likely cause
The full desktop layout, tiny, with no mobile menu at all	No viewport tag
A tiny layout that looks like it's built for a tablet or a specific width	A fixed-width viewport tag, like `width=1024`
Your mobile layout does appear, but slightly shrunk, or you can drag the page sideways and see a blank strip	Something on the page is wider than the screen
It only looks wrong on your phone, not on anyone else's	"Request desktop website" is switched on

Now the details and fixes for each.

Cause 1: there's no viewport tag

Phones assume a page without a viewport tag was built for desktop. They lay it out in a virtual viewport about 980px wide, then shrink it to fit. On an iPhone 17 Pro, which is 402 CSS pixels wide, that's about 41% of full size.

Your media queries are fooled as well. The page reports itself as 980px wide, so every @media (max-width: 768px) rule is ignored, Tailwind's md: classes switch on, and your desktop layout wins.

The fix is one line in the <head>:

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

Where exactly it goes depends on your setup (Next.js, Vite, plain HTML, WordPress). The meta viewport tag has the code for each.

Cause 2: the viewport tag has a fixed width

Old templates and some site builders ship this:

<!-- This tells the phone to pretend it's 1024px wide -->
<meta name="viewport" content="width=1024">

The phone obeys: it lays the page out at 1024px and zooms out to fit. On a Galaxy S25, which is 360px wide, that's about 35% of full size. Replace width=1024 (or whatever number is there) with width=device-width, initial-scale=1.

While you're in there, check for the silly stuff:

name="viewpoint" instead of name="viewport" (it happens)
two viewport tags that disagree, often one from the theme and one from a plugin
the tag inside <body> instead of <head>
maximum-scale=1 or user-scalable=no, which don't cause zooming out but block people from zooming in. Remove them.

Cause 3: something is wider than the screen

This is the sneaky one. Your viewport tag is perfect, your mobile layout appears, but the page still looks a bit shrunk, or wobbles sideways when you scroll.

Here's why. If any element is wider than the viewport, the page becomes that wide. A 402px phone showing a page with a 600px-wide element now has 600px of content. Depending on the browser, it either lets people scroll sideways into a blank strip, or it zooms out so the widest thing fits. Either way, it looks broken.

The usual suspects:

Fixed widths: width: 1200px, min-width: 1024px on the body or a wrapper, Tailwind classes like w-[1200px] or min-w-[800px]
Media without limits: images, videos, iframes and embeds (maps, YouTube, Calendly) with a fixed pixel width
Tables and code blocks with long rows
Long unbroken text: URLs, email addresses, long German words, white-space: nowrap on a heading
Rigid rows and grids: flex rows that don't wrap, grid-template-columns: repeat(4, 300px)
Things parked off-screen: slide-in menus positioned with right: -300px, animations that start at translateX(100%), negative margins

Fixes, with code

Make media shrink to fit:

img,
video {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Replace fixed widths with a flexible container:

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

Let long text break:

.prose {
  overflow-wrap: anywhere;
}

Let rows wrap and grids adapt:

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.row > * {
  min-width: 0; /* lets flex children shrink below their content width */
}

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

Give wide tables their own scroll area instead of stretching the page:

<div style="overflow-x: auto;">
  <table>...</table>
</div>

What about slapping overflow-x: hidden on the body? It hides the sideways scroll, but it also silently cuts off whatever was sticking out, which is sometimes a button or the end of a sentence. Use it only after you've found the cause, and prefer overflow-x: clip on the specific section that needs it.

There's a much longer list of causes and fixes in How to fix horizontal scrolling on mobile.

Cause 4: "Request desktop website" is on

If the site only looks zoomed out on your phone, check the browser:

Safari (iPhone): open the page menu and look for Request Mobile Website. If you see that option, desktop mode is on for this site.
Chrome (Android): open the ⋮ menu and untick Desktop site.

On iPad, Safari requests desktop websites by default, so an iPad showing your desktop layout isn't necessarily a bug.

A different problem: 100vw on desktop

You might also see a thin horizontal scrollbar on desktop, not a zoomed-out page. That's usually width: 100vw somewhere. On Windows (and on Macs set to always show scrollbars), 100vw includes the vertical scrollbar, so an element set to 100vw is slightly wider than the visible area. The fix is width: 100%. Phones use overlay scrollbars, so this one mostly doesn't show up there.

How to diagnose it

Step 1: check the tag

Open your live site, open the browser console and run:

document.querySelectorAll('meta[name="viewport"]').length;  // should be 1
document.querySelector('meta[name="viewport"]')?.content;    // should say width=device-width, initial-scale=1

If that's wrong, fix it first and re-test. It's cause 1 or 2.

Step 2: find anything wider than the screen

With doesitfit: paste your URL (or your localhost) into the app. Any screen where the page is wider than the viewport gets a SPILLING +Npx sticker, which tells you how many pixels too wide it is. Click it, then Show me where to scroll to the culprit and outline it, or Copy fix prompt to hand the problem straight to your AI tool.

With DevTools: switch on device mode, pick a narrow phone, and paste this into the console. It lists every element poking past the right or left edge, with how far it overhangs:

const vw = document.documentElement.clientWidth;
document.querySelectorAll('body *').forEach((el) => {
  const r = el.getBoundingClientRect();
  if (r.right > vw + 1 || r.left < -1) {
    console.log(Math.round(r.right - vw) + 'px over', el);
  }
});

Another quick trick is to outline everything temporarily and look for the box that sticks out:

* { outline: 1px solid red !important; }

DevTools is a decent first check, but it's not a phone. Why DevTools device mode isn't accurate covers what it misses.

Step 3: test narrow

Test at 360px wide, not just at your own phone's width. The Galaxy S25 is 360px, the iPhone SE is 375px, and Samsung phones on the "largest" display size setting drop to 320px. An element that fits at 402 can easily spill at 360. The Samsung Galaxy and iPhone pages list every width.

Does your site fit?

Paste your address (or localhost:3000). doesitfit shows it on real screen sizes at once and tells you, bluntly, where it spills.

Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.

A prompt for your AI tool

If Claude, ChatGPT, Cursor, Lovable, v0 or Bolt built the site, paste this:

My website looks zoomed out on phones. Please fix it properly:

Make sure there is exactly one <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> of every page (in Next.js App Router use the viewport export in app/layout instead; in Vite it goes in the root index.html). Replace any fixed width like width=1024. Don't add maximum-scale or user-scalable=no.

Find every element that can be wider than a 360px-wide screen: fixed width or min-width values in px, images, videos and iframes without max-width: 100%, tables, code blocks, long unbroken text, flex rows that don't wrap, grids with fixed column widths, and anything positioned or translated off-screen.

Fix each one at the source using flexible widths, max-width: 100%, flex-wrap, min-width: 0, overflow-wrap: anywhere, or a horizontally scrollable wrapper for tables.

Don't just add overflow-x: hidden to the body. List every file and change you made and why.

If you get a Copy fix prompt from a SPILLING sticker in doesitfit, paste that too: it names the exact element and screen size.

The quick checklist

One viewport tag, in the <head>: width=device-width, initial-scale=1. No fixed widths.
Nothing wider than 360px on your phone layout: no px widths on wrappers, media capped at max-width: 100%.
Wide content scrolls inside its own box, never the whole page.
Desktop-site mode off when you're testing on your own phone.
Re-test on narrow screens after every fix, because one new embed can undo the lot.

For the wider set of mobile problems AI tools tend to create, see 10 responsive mistakes in AI-built websites.

Questions people ask

Why does my site look fine on desktop but zoomed out on my iPhone?

Desktop browsers ignore the meta viewport tag and just use the window size, so a missing or wrong tag only shows up on phones and tablets. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head and check again.

Can one image really make my whole site zoom out?

Yes. A single 1200px-wide image, table or embed makes the whole page 1200px wide, and the phone has to either scroll sideways or shrink everything to show it. Adding max-width: 100% to images and videos fixes the most common case.

How do I stop my site zooming in when I tap a form field on iPhone?

That's a different problem: Safari zooms into inputs whose text is smaller than 16px. Set input, select and textarea to font-size: max(16px, 1rem) instead of disabling zoom in the viewport tag.

Will overflow-x: hidden fix a zoomed-out site?

It can hide the sideways scroll caused by a wide element, but it cuts off whatever was sticking out and does nothing for a missing viewport tag. Find and fix the wide element instead.