How to Fix Viewport Issues on a Mobile Website (October 2026) Guide

If your mobile website looks zoomed in, scrolls sideways, or breaks on a phone screen, the fix almost always comes down to one missing piece of HTML and a few CSS rules. I have debugged viewport issues for years across WordPress sites, custom Shopify themes, and hand-coded landing pages, and the same root causes keep showing up. This guide walks through the exact steps I use to get a site fitting a mobile screen properly.

You will learn how to fix viewport issues on a mobile website by adding the right meta tag, sizing images and code blocks, fixing the tricky 100vh bug, and testing on real devices. By the end, your site should fit every phone screen from an iPhone SE to a Galaxy Ultra without horizontal scrolling or unexpected zoom.

What is the viewport meta tag and why it matters

The viewport meta tag is an HTML tag that tells mobile browsers how to size and scale a page for the screen it is being viewed on. Without it, mobile browsers fall back to a default viewport width of 980 pixels and render the page as if it were on a small desktop monitor, then shrink it down so the whole layout fits.

That default behavior is the reason your mobile site looks zoomed out with tiny text, or zoomed in when you tap a form field. The browser is guessing at how to display your layout because you never told it the rules. Adding a single meta tag fixes the most common problems in one shot.

For search engines and modern browsers, the viewport meta tag is also a signal that your site cares about mobile users. Google indexes the mobile version of your pages first, so a broken viewport hurts both user experience and SEO at the same time.

The standard viewport meta tag code

Add this single line inside the <head> section of your HTML, ideally as the first meta tag so browsers see it before any CSS loads:

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

Each part of this tag does something specific. width=device-width tells the browser to match the page width to the actual screen width in CSS pixels, instead of pretending the screen is 980px wide.

initial-scale=1 sets the zoom level to 100 percent when the page first loads. Without this, some mobile browsers apply a tiny default zoom that makes text look small or layout feel cramped.

You will sometimes see variations like maximum-scale=1.0, user-scalable=no. Avoid those. They disable pinch-to-zoom, which is an accessibility failure and gets penalized by Google. The two-attribute version above is the recommended standard.

Common viewport problems on mobile and how to spot them

Most mobile layout problems fall into a handful of symptoms. Once you can recognize them, the underlying fix is usually obvious.

Horizontal scrolling. If you swipe left or right and the page keeps moving sideways, something is wider than the viewport. Mobile Safari and Chrome both hide the scrollbar by default, so users often do not realize the page is overflowing.

Zoomed-in display. The page loads looking like it was blown up, and you have to pinch out to read it. This happens when the viewport meta tag is missing or when an old theme sets initial-scale to a non-1 value.

Tiny text that requires pinch-to-zoom. The whole layout fits but the font is unreadable. This is the classic “no viewport meta tag” symptom, plus a lack of proper responsive font sizes.

Form inputs cause unwanted zoom. Tapping into an input field triggers the browser to zoom the page. iOS Safari does this automatically when the font-size of an input is below 16px. The fix is to set input font-sizes to at least 16px.

Content cut off at the edges. Images, code blocks, or fixed-width tables push the layout wider than the screen. This is the over-wide element problem we tackle next.

Fixing over-wide elements that cause horizontal scroll

Horizontal scroll on mobile almost always traces back to one element being wider than the viewport. I start every mobile audit by adding a temporary CSS rule that exposes the culprit:

/* Debug rule - remove after fixing */
* {
  outline: 1px solid red !important;
}

/* Better: find the offender */
html, body {
  overflow-x: hidden;
}

The overflow-x: hidden rule on the body is a quick safety net, but it can hide real bugs. The better long-term fix is to find and resize the actual offender. Common offenders include images without max-width: 100%, pre and code blocks that contain long lines, embedded iframes set to fixed widths, and wide tables.

Add this CSS to your stylesheet to handle most cases automatically:

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

pre, code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

This combination forces media to scale down with the viewport, lets code blocks wrap or scroll internally without breaking the layout, and converts tables into scrollable blocks on small screens. I have shipped this snippet on dozens of sites and it solves roughly 80 percent of horizontal scroll reports on the first try.

Typography considerations for mobile viewports

Typography is where most “mobile site looks weird” complaints actually live. The viewport meta tag fixes the page width, but it does not pick a font size for you.

Aim for a base font-size of 16px on body copy. Anything smaller makes text hard to read and triggers iOS Safari’s input zoom behavior on form fields. Use rem units instead of px so users who change their browser default size still get a working layout:

body {
  font-size: 16px;
  line-height: 1.6;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

input, select, textarea {
  font-size: 16px; /* Prevent iOS zoom on focus */
}

Line-height matters more on mobile than desktop because screens are smaller and reading distance is shorter. A line-height of 1.5 to 1.7 on body text gives the eye enough vertical space to track without losing place.

The 100vh mobile browser bug and modern viewport units

If you have ever set a hero section to height: 100vh and watched it get cut off by the address bar on mobile, you have hit the 100vh bug. The value 100vh is supposed to mean “100 percent of the viewport height,” but mobile browsers calculate it based on the largest possible viewport, including the area hidden behind the URL bar.

When the user scrolls and the address bar hides, the visible height jumps. Your full-screen hero suddenly has a gap, or content appears clipped. This is one of the most reported viewport issues on Reddit and Stack Overflow.

The modern fix is to use the new dynamic viewport units, which are now supported in every major browser as of 2026:

/* Old, unreliable on mobile */
.hero {
  height: 100vh;
}

/* New, dynamic, adjusts as UI shows/hides */
.hero {
  height: 100dvh; /* dynamic viewport height */
}

/* Fallback pattern for older browsers */
.hero {
  height: 100vh;  /* fallback */
  height: 100dvh; /* override if available */
}

There are three new units to know. svh is the smallest viewport height, when the URL bar is shown. lvh is the largest, when it is hidden. dvh is the dynamic value that updates as the UI animates in and out.

For most use cases, 100dvh is what you want. It feels exactly like 100vh on desktop, and it just works on mobile. For sticky footers or hero sections that should always fill the screen, this is the only reliable solution.

Platform-specific guidance for WordPress and Shopify

The HTML fix is the same everywhere, but how you add it depends on your platform. Here is what I do on the two systems I work with most.

WordPress. Most modern themes already include the viewport meta tag. To confirm, open your theme’s header.php file and look inside the <head> section for <meta name="viewport". If it is missing or wrong, edit header.php directly, or add it through a child theme’s functions.php with a small hook:

add_theme_support('responsive-embeds');

function custom_viewport_meta() {
  echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}
add_action('wp_head', 'custom_viewport_meta', 1);

Shopify. Go to theme.liquid in your theme code editor and check the same spot. If you use a sectioned theme, the viewport tag is usually in layout/theme.liquid. Edit it the same way you would any HTML file and save.

After saving, clear any caching plugins or CDN caches like Cloudflare before retesting. Cached HTML is the number one reason “I added the meta tag but nothing changed” troubleshooting threads exist.

iOS Safari vs Android Chrome viewport differences

iOS Safari and Android Chrome handle a few edge cases differently, and these differences show up in production.

iOS Safari zooms in automatically when a form input has a font-size below 16px, which is a usability feature meant to help users read what they are typing. The fix is straightforward: set inputs to 16px or larger.

Android Chrome applies a different default text size adjustment depending on the user’s system font scaling setting. If a user has bumped their system text size up, your rem-based typography will scale with it. This is usually desirable, but you can lock it with -webkit-text-size-adjust: 100% if needed.

Both browsers now support dvh, svh, and lvh, so the address bar fix is universal. The remaining differences are mostly around how aggressively each browser hides and reveals its URL bar.

Testing your mobile viewport fix on real devices

Browser dev tools device simulators are a great starting point, but they do not catch everything. I always test on at least one real phone before calling a viewport fix done.

Open Chrome DevTools, click the device toolbar icon, and choose a phone profile. Resize the window and watch for horizontal scroll and font size changes. Then send the live URL to your own phone using a tool like ngrok, your hosting preview domain, or simply by deploying.

Check five specific things on the real device. Swipe sideways to confirm there is no horizontal scroll. Tap into a form input and confirm the page does not zoom unexpectedly. Scroll a full-screen hero section to confirm no layout jumps. Rotate the phone and confirm the layout adapts. Finally, test in both portrait and landscape orientations because some bugs only show up in one.

I keep a personal checklist of these five checks for every mobile layout audit. When they all pass, I am confident the viewport is working correctly.

Frequently Asked Questions

Conclusion

Most viewport issues on mobile come down to a missing or wrong meta tag, a few elements that exceed the screen width, and the old 100vh bug that the new dvh unit finally solves. Add the standard viewport meta tag, lock your media and code blocks to max-width: 100%, use 16px on form inputs, and switch 100vh to 100dvh for full-screen sections.

If you are still seeing layout problems after these steps, your next move is the real-device test pass. Swipe sideways, tap a form field, scroll a hero, rotate the phone, and try landscape. That five-step check has caught every edge case I have run into while learning how to fix viewport issues on a mobile website.