# HTML Report Is Tiny on a Phone — The Viewport Tag, and What Else Breaks
Canonical: https://commareports.com/fix/html-report-tiny-on-phone
Published: 2026-09-29
> Your HTML report opens on a phone as a shrunken desktop page you have to pinch to read. The missing viewport meta tag, the fixed widths and wide tables that survive it, and how to check before you send the link.
# The report is tiny on a phone
You send the link, someone opens it on their phone between meetings, and
the reply is _"I can't read this."_ The page is there, all of it, at about
a third of the size, and the only way in is pinch-and-pan.
## Cause 1: no viewport tag
Open the file and look at ``. If this line isn't there, that is
almost certainly the problem:
```html
```
Without it, mobile browsers assume a page was written for a desktop. They
lay it out on a virtual canvas about **980 px** wide and shrink the result
to fit a 390 px screen. Nothing is broken; it is a faithful miniature.
With it, the browser lays the page out at the device's real width, and any
responsive CSS the page has starts to apply.
Report generators miss this constantly. Anything that writes HTML by
string concatenation — a Python script, a test runner's default template,
a coverage tool from before phones mattered — tends to start with a bare
``. Add the tag in a post-processing step, not by
editing the tool's installed template, or the next upgrade undoes it.
## Cause 2: something is wider than the screen
After adding the tag, the page renders at real size and a horizontal
scrollbar appears. Something has a width the phone can't honour:
- **A fixed container.** `width: 1200px` on a wrapper. Use
`max-width: 1200px; width: 100%`.
- **A wide table.** Tables don't wrap columns. Put it in a scrolling box
so only the table scrolls, not the page:
```html
<div style="overflow-x: auto">
<table>
…
</table>
</div>
```
- **A chart with a pixel width.** Plotly, Chart.js and Vega all have a
responsive mode — `responsive: true`, `autosize`, `width: "container"`.
Hard-coded `width=1000` defeats it.
- **Images.** `img { max-width: 100%; height: auto; }` is the one-line fix.
- **A long unbroken string.** A URL, a commit hash, a stack trace. Add
`overflow-wrap: anywhere` to the cell or `pre`, or give `pre` its own
`overflow-x: auto`.
To find the culprit, open the page in desktop dev tools with the device
toolbar on, then run this in the console — it outlines every element
wider than the viewport:
```js
document.querySelectorAll("*").forEach((el) => {
if (el.scrollWidth > document.documentElement.clientWidth) el.style.outline = "2px solid red";
});
```
The innermost red box is the one to fix.
## Cause 3: text-size adjustment
On iOS, landscape rotation can inflate text unexpectedly on pages without
a viewport tag. Once the tag is present,
`-webkit-text-size-adjust: 100%` on `html` keeps sizes stable.
## Check before you send
Paste the HTML into the free [HTML viewer](/tools/html-viewer) and narrow
the browser window, or use your browser's device toolbar. Thirty seconds
now saves the _"can't read it"_ reply.
## What Comma does, and doesn't
Published reports render inside an iframe. Inside a frame, the layout
width is the frame's width, not a virtual 980 px canvas — so a report
that is missing **only** the viewport tag lays out at real phone width in
Comma without any edits. Fixed widths, wide tables and pixel-sized charts
still overflow; those are CSS, and the fixes above apply.
What you do get either way: one link that opens the same page on a phone
and a laptop, and readers who can [comment on the exact
table row](/comment-on-html) instead of sending a screenshot of it.
## Try it
**[Publish a report →](https://commareports.com/)**
### Related
- [My HTML report lost its CSS](/html-report-broken-css)
- [The HTML file shows code instead of the page](/fix/html-file-shows-code-instead-of-page)
- [Plotly chart missing from the exported HTML](/fix/plotly-chart-not-showing-in-html)
- [HTML formatter](/tools/html-formatter) — make generated markup readable before you edit it