Increasing the browser’s zoom level changes the size of 1 CSS pixel.
For example, at 400% zoom, 1 CSS pixel is 1/23th of an inch, rather than 1/92th.
Common mistake #1: Content does not reflow to a single column when zoomed.
Common mistake #2: Scrolling bars appears both horizontally and vertically when using browser zoom.
Common mistake #3: Giving an element a fixed width that’s larger than 320px
If you give an element a fixed width that’s larger than 320px:
it won’t fit on a 320px-wide screen,
it won’t fit within a 1280px-wide window at 400% zoom.
Failure example: Reddit ‘cookies policy’ dialog
The example shown in a video:
The same example shown in pictures:
Guidance for Code
This is about using Responsive Web Design techniques, such as:
Flexbox / CSS grid to let elements change their width or reflow onto several lines based on the width of the viewport;
Giving containers a width that’s relative to the width of the viewport (using % or vh for example).containers and letting content reflow when it can’t fit horizontally within the viewport.
The use of <code><pre> formatted content (such as code) can cause horizontal scrolling. Using the CSS declarations such as word-wrap: break-word; on <code><pre> in small viewports will help to avoid horizontal scrolling at all.
Design ‘Mobile first’: design the layout for narrow screens first.
This forces you to decide how all of the page’s elements fit in one column.
Make sure that your layout works on a 320px screen (like an iPhone 5, or the original iPhone SE), not just on a wider mobile device.
This same layout is what users will see …
On a 640px screen when the browser’s zoom is set to 200%
On a 1280px screen when the browser’s zoom is set to 400%
Guidance for Quality Insurance
1. Checking at 100% zoom in a 320px wide window
Visit the page using Google Chrome
Make sure that your zoom level is 100%. You can use Ctrl +/- on Windows and Cmd +/- on macOS to change the zoom level.
Open the developer tools by right clicking anywhere on the page and selecting 'Inspect element'
Make the developer tool window bigger, so that the web page window is just 320px wide.
Assuming that the developer tool window is on the right hand side of the web page content:
Place your mouse on the separation between the web page and the developer tool window. (If your mouse cursor is in the right place, it will show left and right arrows).
While you resize the developer tool window, you should see the dimensions of the web page window update, on the top right corner of the web page window.
Check that you can see all of the web page's content without needing to scroll left and right.
2. Checking at 400% zoom level in a 1280px wide window
Follow the same steps as above, but this time:
Resize the developer tool window so that the web page window is 1280px wide.
Increase the web page's zoom level to 400%.
If your screen is not wide enough to do that, you can do this instead:
Resize the developer tool window so that the web page window is 640px wide.
Increase the web page's zoom level to 200%.
Official wording in the Web Content Accessibility Guidelines
1.4.10 Reflow (Level AA): Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
Vertical scrolling content at a width equivalent to 320 CSS pixels;
Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require two-dimensional layout for usage or meaning.
Note: 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.
Examples of content which requires two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.