What screen width does Google actually use to determine mobile-friendliness?

Why does Google still use an iPhone 5 viewport as a reference?

The choice of a iPhone 5 as a reference may seem outdated since this model is from 2012. However, Google is not looking to reflect current usage but to set a universal minimum standard. With its 320px width in portrait mode, the iPhone 5 represents the smallest common denominator.

This approach ensures that all mobile devices, including entry-level smartphones and in emerging markets, can correctly display your content. Google tests the resilience of your responsive design rather than merely validating that it works on the latest premium models.

What does this mean for mobile-first crawling?

Since moving to mobile-first indexing, Googlebot mainly uses its mobile version to crawl and index your pages. The user-agent simulates a modern iPhone browser, but the tested viewport width remains that of an iPhone 5. On this basis, Google evaluates whether your site deserves the mobile-friendly label.

If your design breaks at 320px — overflowing sidebar, truncated text, inaccessible buttons — Google will consider your site not optimized for mobile. The consequences are direct: loss of mobile rankings, warnings in Search Console, and potentially a degradation of actual user experience.

How does Google test this target width in practice?

Google does not perform a simple static screenshot. Its crawler executes JavaScript, waits for the full rendering, and analyzes the DOM behavior at that width. It checks that the main content remains readable, that CTAs are clickable, and that navigation functions without horizontal zoom.

The test also includes checking the viewport meta tag. If it is missing or misconfigured, Google may see the site as non-responsive even if the CSS technically adapts. The tag must contain width=device-width, initial-scale=1 to pass mobile-friendly validation.

• 320px wide remains the minimal reference width tested by Google for mobile-friendliness
• The crawler simulates a recent iPhone as a user-agent but tests an iPhone 5 viewport
• A design that breaks at 320px will be penalized even if your actual users have larger screens
• The viewport meta tag must be correctly configured to pass validation
• Google executes JavaScript and waits for the full rendering before evaluating mobile compatibility

Is this iPhone 5 reference truly relevant in practice?

Let's be honest: less than 0.5% of global mobile traffic currently comes from an iPhone 5 or devices with a 320px viewport. Most users browse on screens ranging from 375px (iPhone SE, 12 mini) to 428px (iPhone 14 Pro Max). Nonetheless, Google upholds this outdated standard as a validation criterion.

From a practitioner's perspective, this approach makes sense for one reason: it forces developers to think mobile-first right from the design stage. A design that works at 320px will necessarily work on all larger devices. It's a guarantee of universal compatibility, even if it imposes sometimes frustrating constraints.

Do analytics data contradict this rule?

Your Google Analytics data probably shows that 0% of your visitors use a 320px screen. Should you then ignore this recommendation? No. Google's mobile-friendly test is not a measure of your actual usage, but a technical compliance filter. [To be verified]: Google has never published a direct correlation between mobile-friendly scores and rankings, but field observations indicate visible penalties for non-compliant sites.

The real issue arises when your design is optimal at 375px but breaks at 320px. Google will penalize you while 99.5% of your users have a perfect experience. It's frustrating, but that’s the cost of universality. On the flip side, if your site functions well at 320px, you can be confident that no mobile user will encounter technical problems.

What nuances should be added to this statement?

Mueller does not specify whether Google tests all pages at 320px or just a sample. Our observations suggest that the mobile-first crawler prioritizes strategic pages (home, categories, top landing pages). Deep pages may escape the strict test, but that’s a risky gamble.

Another point missing from the statement: portrait mode only. Google mainly tests in vertical orientation, not landscape. A site that breaks in landscape mode at 568px (iPhone 5 horizontal) is unlikely to be penalized. Finally, the statement does not mention Android, even though Google also tests with a Chrome Mobile user-agent. The reference width remains similar, but rendering can differ slightly.

How can you check that your site passes the 320px test?

Use Chrome DevTools: open your site, enable responsive mode (F12 then Ctrl+Shift+M), and select "iPhone SE" or manually set a width of 320px. Scroll through the entire page and ensure that nothing overflows, that the text remains readable without zooming, and that all buttons are clickable.

Also test using the Google Mobile-Friendly Tool (search.google.com/test/mobile-friendly). It will provide you with Google's official verdict and identify specific issues: text too small, clickable elements too close, misconfigured viewport. Search Console also offers a "Mobile Usability" report that lists all problematic pages detected during crawling.

What mistakes should be avoided when optimizing for 320px?

The classic mistake: using fixed pixel widths in your CSS for main containers. A div that is 360px wide will automatically break at 320px. Opt for percentages, max-width: 100%, and relative units like rem or em. All images should have max-width: 100%; height: auto; to adapt.

Another trap: sidebars or multiple columns at low resolutions. At 320px, you only have room for one column. Use media queries to stack all content vertically in columns as soon as the width drops below 480px. Wide HTML tables should become horizontally scrollable or convert to stacked lists via CSS.

Should you compromise design to meet this constraint?

No. The key is to think mobile-first from the design stage, not to adapt at the end of the project. Start by designing for 320px, then progressively enhance for larger screens using media queries. This approach avoids painful compromises and generally results in a cleaner and more performant design.

If some complex elements (interactive graphics, massive data tables) truly cannot fit at 320px, use server-side detection or JavaScript to offer a simplified version on smaller screens. Google accepts differentiated mobile/desktop content as long as the search intent is served and you do not use cloaking.

These optimizations may seem simple in theory, but their implementation on an existing site often involves substantial restructuring of HTML, CSS and sometimes JavaScript. Conflicts between breakpoints, display bugs specific to certain browsers, and compatibility with third-party themes or plugins complicate the task. For e-commerce or media sites with hundreds of different templates, exhaustive auditing and correction represent a significant project that may be wise to delegate to a specialized SEO agency with the necessary technical expertise and automation tools.

• Systematically test all your templates at 320px wide using Chrome DevTools
• Check your site with the Google Mobile-Friendly Tool and fix all reported issues
• Replace all fixed CSS widths with relative values (%, rem, max-width)
• Correctly configure the viewport meta tag: width=device-width, initial-scale=1
• Stack all multi-column content vertically below 480px through media queries
• Make all images responsive with max-width: 100% and height: auto