Comma

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 <head>. If this line isn't there, that is almost certainly the problem:

<meta name="viewport" content="width=device-width, initial-scale=1" />

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 <html><head><title>. 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:
    <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:

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 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 instead of sending a screenshot of it.

Try it

Publish a report →

Related