A webpage should make sense even when someone cannot see its colors, pictures, or layout.
What You Need to Know
A narrow screen should not force someone to scroll sideways to read every line of a form. Put fields in a logical source order and use responsive CSS without hiding content or changing its meaning.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<meta name="viewport" content="width=device-width, initial-scale=1">
<main>
<h1>Our projects</h1>
<p>Keep the text in a normal reading order so it can wrap on narrow screens.</p>
<button type="button">View projects</button>
</main>Let’s Read the Code
- <meta>: A meta element provides document metadata for browsers and related systems.
- <main>: The main element marks the primary page content.
- name: The name is the key used for the submitted value.
- content: Content provides the metadata value of a meta tag.
What the example shows: Reflow means content can fit a narrow viewport without forcing sideways scrolling for normal reading.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Shrink the browser width and increase the text size to check if anything is cut off.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- The viewport tag helps responsive layouts but CSS and layout choices decide actual reflow.
Key Takeaways
- A narrow screen should not force someone to scroll sideways to read every line of a form.
- <meta>: A meta element provides document metadata for browsers and related systems.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.