If a page opens at an unexpected size on a phone, fix its viewport and responsive layout rather than disabling the visitor's ability to zoom. Pinch-to-zoom and text resizing help people read content, including people with low vision.
Set the mobile viewport without locking zoom
Put one viewport declaration in the document's <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width makes the layout viewport use the device's CSS-pixel width, and initial-scale=1 sets the initial scale. This gives the browser a useful starting point while leaving the visitor free to zoom.
Do not add user-scalable=no, maximum-scale=1, or a restrictive minimum-scale to stop people from enlarging the page. Those settings can prevent users from resizing content. WCAG 2.2 Success Criterion 1.4.4 (Resize Text) requires text to be resizable up to 200% without loss of content or functionality, subject to the criterion's exceptions.
Make the layout work when users enlarge it
A viewport tag is only a starting point. Use flexible layouts and content-sized components so the page can adapt as the viewport narrows. Avoid fixed page widths, and make wide media fit its container, for example:
img,
video {
max-width: 100%;
height: auto;
}
Check tables, navigation, dialogs, and other components that may force horizontal scrolling. For a practical introduction to the layout approach, see why responsive design matters for your website.
Check zoom, text resizing, and reflow
Test the page with browser zoom and text enlargement, not just at its default size. Confirm that text does not overlap or disappear, controls remain usable, and people can still complete the page's main tasks. At a viewport equivalent to 320 CSS pixels wide, content should reflow without requiring scrolling in two directions, except where a two-dimensional layout is essential.
If the page looks unusually scaled on first load, check for duplicate viewport tags, fixed-width elements, oversized minimum widths, and transforms before changing the viewport declaration. Then test keyboard and screen-reader access as well as zoom; this developer's guide to testing website accessibility covers a broader review.
For reference, see MDN's viewport meta tag documentation, WCAG's guidance on Resize Text (1.4.4), and Reflow (1.4.10).