Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
At a 320 CSS-pixel viewport, check whether the page fits without unintended horizontal scrolling, clipped content, or unreadable text. In Chrome DevTools, the console check below quickly flags possible document overflow; it is a diagnostic lead, not proof that the page fails an accessibility requirement.
Run a quick overflow check at 320px
In Chrome DevTools, open Device Mode and set the responsive viewport width to 320px. Chrome also documents a 320px Mobile S preset. Select the page’s execution context in the Console, then run this illustrative JavaScript expression:
({
viewport: document.documentElement.clientWidth,
page: document.documentElement.scrollWidth,
overflows: document.documentElement.scrollWidth > document.documentElement.clientWidth
})clientWidth reports the document element’s visible width, while scrollWidth reports the width needed to include its scrollable content. If overflows is true, the document’s scrollable width is greater than its client width. That points to something worth investigating; it does not identify the element or establish that the design is defective.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Chrome’s Device Mode documentation explains how to set and inspect simulated viewport sizes. The code is a convenient diagnostic check, not a snippet prescribed by Chrome or the UK Department for Work and Pensions.
#1 Best Overall
Find the cause before deciding it is a problem
Inspect the page at 320px. Look for content that extends beyond the viewport, text that becomes difficult to read, broken layout, or controls and information that are clipped. Use DevTools’ element inspection and computed styles to find which element is wider than the available space, then trace the CSS rule or content causing it.
Not every horizontally scrollable element is a page-level failure. A table, map, or other component may need two-dimensional presentation. The UK Department for Work and Pensions’ responsive-design testing guidance distinguishes content that must reflow from exceptions that need horizontal movement: “For everything else, it needs to reflow so that it fits on tablet and mobile devices without the user needing to scroll horizontally.” Judge an intentional scrollable component separately from unintended horizontal scrolling across the document.
Audit the page beyond one viewport
- Set the narrow viewport: In Chrome DevTools, activate Device Mode and choose a responsive width of 320px. The Device Mode controls also let you use a documented 320px Mobile S preset.
- Check the console result: Run the expression above and note whether the document’s scroll width exceeds its client width.
- Inspect the rendered page: Check readability, layout, clipping, and whether horizontal scrolling is needed. The DWP guidance recommends scaling down gradually to 320px while checking the content.
- Review breakpoints: Inspect the page at relevant widths and check its media-query breakpoints. Chrome DevTools can show breakpoint bars and let you jump from a breakpoint to the associated CSS declaration.
- Check other viewing conditions: Test portrait and landscape, text zoom up to 200%, and a larger browser font setting, as described in the DWP manual.
- Verify on a phone when it matters: Device Mode is an approximation; it does not run the page on a physical mobile device.
Chrome’s Device Mode guide covers viewport and breakpoint inspection as well as the limits of emulation. The DWP page, “Responsive design: How to test”, describes the 320px reflow, orientation, and text-resizing checks.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteFix the layout instead of hiding content
Once you have found the element responsible, make it adapt to the available width where appropriate. web.dev’s responsive web design guidance recommends flexible layouts, such as Grid or Flexbox, and gives max-width: 100% as a way to keep images from exceeding their container. Fixed-width content can force horizontal scrolling when it is wider than the viewport.
Do not simply hide the element or suppress the overflow to make the console check pass. That can conceal content users still need. Preserve intentional two-dimensional components where necessary, while making the rest of the page reflow.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What the 320px check establishes—and what it does not
320px is a practical test width: Chrome documents it as the Mobile S preset, and the DWP manual uses it for a horizontal-scrolling check. The console expression compares two document widths to flag possible overflow, while visual inspection identifies whether the page actually has a usability problem.
Rank #4
Neither one viewport nor emulation alone proves that a page works on every phone. Review responsive breakpoints and orientations, test text resizing, and use a physical device for important cases. The check is a useful starting point for finding layout issues—not an accessibility verdict.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
