Docs & tutorials
Responsive design articles, MDN-style references, or framework docs. Readers see exactly how wide their content column is as they follow along.
Responsive Screen Size Widget
Generate a live width and breakpoint widget for docs, tutorials and design systems. Preview how it behaves in a responsive content column, then copy the embed code.
Async loader Auto height No stats beacon
Preview
Docs column simulator
Drag the column width to see the embedded widget reflow and cross breakpoints.
520px
3201100
Generated code
<div class="screensize-embed" data-widget="screen-checker" data-theme="auto" data-layout="compact" data-fields="embed,breakpoint,screen,dpr">
<a href="https://screensize.net/embed">Screen size widget by ScreenSize.net</a>
</div>
<script async src="https://screensize.net/embed.js" referrerpolicy="strict-origin-when-cross-origin"></script>The fallback link remains visible when JavaScript is unavailable. Sites may add rel="nofollow" if their linking policy requires it.
Where to embed it
Drop the widget anywhere a reader benefits from seeing their own layout width — the frame width reflects the container it lives in, not the browser viewport.
Design systems
Internal storybooks and component playgrounds. Embed alongside a breakpoint table so devs cross-check the live number against the spec.
GitHub READMEs
Open-source repos explaining viewport behavior. The async loader is tiny and the fallback link degrades cleanly without JS.
Configuration
| Attribute | Values | Use |
|---|---|---|
| data-theme | auto | light | dark | Match the reader's system theme or force a specific theme. |
| data-layout | compact | full | Use compact for articles and full for wider docs pages. |
| data-fields | embed,breakpoint,screen,dpr | Comma-separated list of metric cards to show. |
Insight
Privacy and SEO model
The embed is designed as a useful interactive reference, not a link scheme. The public page is indexable, while the iframe runtime and loader script are marked noindex. The widget avoids analytics beacons so third-party embeds do not pollute ScreenSize.net's aggregate viewport data.
Frequently asked questions
› What does the embedded widget measure?
The main number is the live width of the embedded widget frame in CSS pixels. It also shows the visitor's screen resolution, DPR and responsive breakpoint context.
› Is iframe width the same as the browser viewport?
No. In an embed, the honest value is the widget frame width. When the widget is placed in a responsive article or docs column, that width shows how the actual content area reflows.
› Does the widget send analytics or viewport stats?
No. The embed runtime does not call ScreenSize.net stats endpoints and does not send page URLs or measurements back to the site.
Related tools
- Viewport Size Checker See your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- Responsive Breakpoint Checker Check the current responsive breakpoint live, compare Tailwind and Bootstrap defaults, and copy media queries for common viewport widths.
- Responsive Design Testing Test common responsive design scenarios against your live viewport: navigation, grids, forms, modals, galleries, data tables and dashboards.
- Viewport Bookmarklet Install a lightweight bookmarklet that overlays viewport size, DPR, breakpoints and overflow checks on any page you are debugging.