THE GITHTML FIELD GUIDE
Set a mobile viewport for an HTML report
Add a viewport declaration using device-width, then make the layout flexible enough to fit that width. The metadata alone cannot repair a large fixed container, oversized image, or unbroken code line. Keep zoom available and verify the document in portrait and landscape with a representative long section.
Distinguish viewport from layout
The viewport tells the browser how to establish the page's viewing area. The document's CSS still decides how wide its content wants to be. This distinction explains a common disappointment: an author adds the familiar viewport tag, yet the report continues to scroll sideways. A table with a large minimum width can still exceed the available space.
For a reading document, start with a normal device-width viewport and a fluid body. Avoid setting the viewport to the width of a particular phone model. Your reader may use landscape orientation, a different device, or enlarged text. A document should accommodate those changes without requiring a separate exported file for each screen.
Inspect the largest content block
Search the stylesheet for fixed widths and minimum widths before changing global text size. A large desktop wrapper often causes the entire composition to behave badly. Replace that wrapper with a sensible maximum width and flexible horizontal margins. Then check images, tables, and preformatted blocks independently, because each has a different reason for retaining width.
Do not solve overflow by hiding it on the page body. That can make the screen look tidy while silently cutting off a command or a numeric column. Give genuinely wide material a local scrolling container, or rewrite its presentation. The aim is to make ordinary prose fit while keeping exceptional content reachable.
Apply a small baseline
The example below intentionally leaves zoom restrictions out. It provides a readable starting layout without promising a complete design system. Add your own spacing and color choices only after the content fits. If an inherited template contains another viewport declaration, remove the conflict rather than stacking several declarations and hoping one wins.
- Open a paragraph-heavy section in portrait orientation.
- Check the longest code line and widest table separately.
- Enlarge text and confirm that headings and labels remain visible.
- Rotate the device and check that the reading order does not change.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 70ch; padding: 1rem; }
img { max-width: 100%; height: auto; }
pre { overflow-x: auto; }
</style>Sources and further reading
AI-assisted writing with source-linked guidance and illustrative examples. Read our editorial approach or report a correction.