A website usually looks different on mobile for one of three reasons: the layout responds to the narrower screen (expected), the phone is served a different version of the page (caching, device detection or plugins), or the phone’s browser and settings render it differently (Safari’s engine, dark mode, font scaling). Work out which of the three you are dealing with first, because the fixes have nothing in common.
First, reproduce it on desktop
Open the same URL in a mobile view on your computer: Chrome DevTools device mode, or a mobile view extension such as Mobile View Extension, which reloads the page with a mobile user agent and phone screen size.
- Looks wrong in the mobile view too? It is a layout or content problem. Start with causes 1–4.
- Looks right in the mobile view but wrong on the phone? It is a delivery or browser problem. Start with causes 5–11.
Layout and content causes
1. The viewport meta tag is missing or wrong
Without <meta name="viewport" content="width=device-width, initial-scale=1">, phones render the page as a roughly 980 px desktop page and shrink it, so everything looks tiny. With a wrong value, such as a fixed width=1024, the page is scaled oddly. See the viewport meta tag explained.
2. Something is wider than the screen
One element with a fixed width (a table, an embed, a long URL, an image without max-width: 100%) makes the whole page scroll sideways, and some browsers zoom out to fit it. Find it in DevTools by checking which elements have a scrollWidth larger than the viewport.
3. Breakpoints switch the layout at an unexpected width
Your phone might be wider than you think in landscape, or a tablet might fall on the desktop side of a 768 px breakpoint. Check the actual width of the device in the iPhone viewport chart and review your breakpoints.
4. Content is hidden or reordered on mobile
Page builders and CSS often hide sections with display: none at small widths, or reorder columns. That is intentional design, but it is easy to forget it is there. Check mobile-only visibility settings.
Delivery causes: the phone gets a different page
5. Caching serves an old version
The phone’s browser may be holding old CSS, or your CDN or caching plugin may keep a separate mobile cache that was not cleared. Clear the site cache and CDN cache, then reload on the phone in a private tab.
6. Device detection serves a different template
Some themes, plugins and servers check the user agent and serve different HTML to phones. A desktop browser window, even a narrow one, never sees that version. A mobile view that sends a real mobile user agent will. How user agents work is explained in what a user agent switcher does.
7. Ads, A/B tests and personalisation
Ad slots, experiments and location-based content can differ by device or visit. Test logged out, in a private tab, with experiments disabled if your tool allows it.
Browser and settings causes: the phone renders it differently
8. Safari’s engine behaves differently
All iPhone browsers mostly use WebKit. Differences show up in form controls, position: sticky inside overflow containers, 100vh with the collapsing address bar (use 100dvh), and newer CSS features. Test in iOS Safari via the Xcode Simulator or a real device; see testing on iPhone.
9. Dark mode is applied by the browser
Some browsers, such as Samsung Internet, can force dark colours on pages that do not declare their own colour scheme. Logos with transparent backgrounds and hard-coded colours end up unreadable. Declare color-scheme and provide a dark theme with prefers-color-scheme, or explicitly set light colours.
10. Fonts and text size differ
If a web font fails to load, the phone falls back to its system font, which has different widths, so text wraps differently. Users may also enlarge text in their browser or system accessibility settings, and mobile browsers sometimes enlarge text automatically in landscape. Use relative units, allow text to wrap, and set text-size-adjust: 100% if automatic inflation causes problems.
11. Browser features change the page
Content blockers, data-saving modes, reader views and translation can all change what a visitor sees. If one person reports a strange layout, ask which browser and which features they use before rebuilding anything.
A quick diagnostic table
| Symptom | Most likely cause |
|---|---|
| Everything tiny, user has to zoom | Missing viewport tag (1) |
| Page scrolls sideways | Element wider than screen (2) |
| Layout fine in preview, old design on phone | Cache (5) |
| Completely different design on phone | Device detection or mobile theme (6) |
| Only broken on iPhone | Safari/WebKit difference (8) |
| Colours inverted or logo invisible | Forced dark mode (9) |
| Text wraps differently, buttons overflow | Font fallback or text scaling (10) |
Preventing it next time
Check new pages in a mobile view while you build, not after launch, and keep a short release checklist. The mobile website testing checklist has one. For WordPress-specific fixes, see how to make a WordPress site mobile friendly.
Frequently asked questions
Why does my site look different on my phone than in Chrome’s mobile view?
Chrome’s mobile view uses Chrome’s engine and your desktop’s cached files. The phone may use Safari’s engine, have different cached files or a CDN mobile cache, or apply dark mode or text scaling.
Why does my WordPress site look different on mobile?
The most common causes are page builder settings applied only at desktop size, a caching plugin serving an old mobile cache, and themes or plugins that serve a separate mobile layout.
Why is my website zoomed out on mobile?
Usually the viewport meta tag is missing, or an element is wider than the screen and the browser zooms out to fit it.