Skip to main content

Browser Zoom

Must haves

  1. Users can zoom in on the page up to 200% without loss of content or functionality.
    1. TIP: test this from a starting viewport width of approximately 1280 px, NOT on a maximized browser on a massive external monitor.
  2. Content should reflow, and can be reformatted if needed, but all functionality must still be present and usable.
    1. TIP: menus can be collapsed into a mobile version, filtering sections can be collapsed into accordions, content can reflow from multiple columns down into one column, etc.

Learn more about resizing web content

Do and Don't

DoDon't
All content is still present and usable after zooming in. Nothing is cut off or obscured due to fixed size containers. Content reflows nicely to be read in one column and even if sections are collapsed, they can still be expanded and nothing is lost.
  • Content does not reflow and tedious horizontal scrolling is required to read.
  • Content gets cut off within fixed size containers.
  • Content overlaps.
  • Content is removed/hidden entirely with no method to access it.
  • Content does not allow pinch/zoom on mobile.

Example: this site has a fixed width and content gets cut off when zooming in, causing it to be unreadable.

Example of Browser Zoom with Content Cut Off

Last modified