Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchiTechGuides 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
To make a website work well on phones, let its layout, images, text, and controls adapt to the available space instead of designing for a fixed set of device sizes. These seven practices help pages remain usable on narrow screens, at larger zoom levels, and on wider displays.
1. Set the viewport to the device width
Without a viewport declaration, some mobile browsers lay out a page inside a wider virtual viewport. That can keep narrow-screen styles from applying as expected and make the page appear shrunken. Add this element inside the document’s <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">The width=device-width setting makes the layout viewport match the device width; initial-scale=1 sets the initial zoom. Avoid user-scalable=no and restrictive maximum-scale values, which can prevent people from zooming. If a page still appears unexpectedly scaled, investigate overflow rather than using the viewport setting to hide it. web.dev’s viewport guidance explains the setting, and MDN’s viewport reference notes that initial-scale=1 is common but usually unnecessary when width=device-width is present.
Recommended Free Tools
2. Use flexible layouts instead of fixed widths
Build columns and components to use the space available, rather than assigning the whole page a fixed width. A fixed-width layout can force horizontal scrolling on a phone or leave excessive blank space on a large screen. Flexible grids, relative units, and minimum or maximum sizing help layouts cope with widths that were not anticipated when the page was designed.
#1 Best Overall
For an image that should shrink within its container without becoming larger than its intrinsic size, a common rule is:
img {
max-width: 100%;
height: auto;
}Apply the rule deliberately: some images, such as diagrams, may need a different presentation or a way to inspect fine detail. MDN’s responsive design overview describes flexible layouts and media as part of designing for varied screen sizes.
3. Let the content choose the breakpoints
Start with a narrow layout and widen the viewport until the content needs a different arrangement. Add a breakpoint where a navigation bar wraps awkwardly, a line of text becomes difficult to scan, or columns become too cramped or too spread out. Avoid choosing breakpoints solely because a particular phone or tablet model has a certain width; device categories and sizes change, and devices can combine touch and pointer input.
Not every responsive layout needs a media query. Flexible sizing can handle many changes automatically; use a media query when the content needs a structural change. For example, a one-column card list might become a two-column grid once the cards have enough room to remain readable. MDN’s responsive design guidance covers media queries and other responsive layout techniques.
4. Serve images suited to the layout
A large image can cost users data even when it is displayed in a small space. Use responsive image techniques to let the browser choose among suitable image candidates for the rendered size and resolution. For images loaded through CSS, mobile-first styles can avoid requesting a large desktop image on small screens in some cases; this does not automatically change how images placed in HTML are downloaded.
For images below the initial viewport, the HTML loading="lazy" attribute can defer loading until they are near view:
<img src="gallery-image.jpg" loading="eager" alt="Description of the image">Lazy loading may avoid downloading images a visitor never reaches, but its effect on speed and data use depends on the site and the images involved. MDN explains responsive image choices and lazy loading in its responsive images guide.
5. Keep text readable when people zoom
Use text sizing and layouts that can adapt when users enlarge a page. A layout that reflows can help people with low vision as well as people using a narrow screen. Check the page at increased zoom: text should not overlap, disappear behind fixed elements, or require horizontal scrolling for ordinary reading.
For reading-oriented pages, W3C WAI describes a common way to meet the reflow criterion: content can fit into a single column at a 320 CSS-pixel-wide viewport and be read using vertical scrolling alone. This is a reference for reflow, not a rule that every kind of content must become one column; some content may legitimately need two-dimensional layout. See W3C WAI’s Understanding Success Criterion 1.4.10: Reflow.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.6. Make controls usable with different input methods
A small screen does not guarantee that someone is using touch, and a large screen does not guarantee a mouse. Build controls that work for keyboard users and assistive technology as well as touch and pointer input.
- Use semantic HTML controls, such as buttons for actions and links for navigation, with visible labels and meaningful accessible names.
- Make sure keyboard focus moves through controls in a sensible order. If CSS grid or flexbox changes the visual order, check that it still matches the document order in a way that makes sense.
- Make touch targets large enough to activate reliably, and avoid interactions that require a precise gesture when a simpler option is possible.
- Label form fields, keep content usable when orientation changes unless a specific orientation is essential, and let users cancel or undo touch interactions where appropriate.
W3C WAI’s mobile accessibility guidance discusses these considerations, including labels, orientation, and touch interactions.
7. Test widths, orientations, and real interaction
Do not test only a few preset phone and tablet sizes. Resize the browser to find where the content itself starts to fail, then check relevant orientation changes and input modes. A short review should include:
- Horizontal overflow, clipped text, and content that becomes too wide at increased zoom.
- Navigation and controls that wrap, overlap, or become difficult to activate.
- Images and embedded media that exceed their containers.
- Keyboard focus order and whether it still makes sense alongside the visual order.
- Whether a visitor can complete important tasks using touch, keyboard, and pointer input as relevant to the site.
Lighthouse audits can help identify issues such as missing viewport configuration or content overflowing the viewport, but automated checks do not establish that a page’s navigation or tasks are easy to use. Follow them with a manual pass through the site’s key flows. See web.dev’s viewport article and web.dev’s accessibility guidance.
Quick Recap
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.
