Free online responsive design tester with real device presets. Preview HTML or URLs at iPhone, iPad, Samsung, Pixel, MacBook, and desktop sizes. See active Tailwind/CSS breakpoints and media query status in real time.
Note: Many sites block iframe embedding (X-Frame-Options). HTML mode works for all content.
Select a device preset to see active breakpoints.
Responsive Breakpoint Previewer is a free online tool that lets you preview HTML content or URLs at different screen sizes using real device dimensions. Select from preset devices — including iPhone, iPad, Samsung Galaxy, Pixel, MacBook, and desktop displays — or enter a custom width and height. The tool renders your content in an iframe at the exact pixel dimensions and shows which CSS/Tailwind breakpoints are active at that size. It supports both HTML input (paste any markup) and URL input (for sites that allow iframe embedding), with a rotate button for portrait/landscape switching. All rendering happens locally in your browser.
Use the Responsive Breakpoint Previewer when building responsive layouts and you want to quickly test how your HTML looks at specific device sizes without opening Chrome DevTools, when verifying that Tailwind breakpoint classes apply correctly at different widths, or when demonstrating responsive behavior to clients or team members using real device names and dimensions.
Front-end developers use the Responsive Breakpoint Previewer to test responsive layouts at exact device widths during development, verify that Tailwind responsive utilities (sm:, md:, lg:) activate at the expected breakpoints, preview email templates at common email client widths, check that navigation menus collapse correctly at mobile breakpoints, compare how the same content renders across mobile, tablet, and desktop viewports, and generate accurate screenshots at specific device dimensions for design review or documentation.
Modern frameworks use consistent breakpoint ranges: 320-480px for mobile portrait, 481-768px for tablets and large phones, 769-1024px for small laptops and landscape tablets, 1025-1440px for desktops, and 1441px+ for large monitors. Tailwind CSS defaults are sm:640px, md:768px, lg:1024px, xl:1280px, and 2xl:1536px. Bootstrap uses 576px, 768px, 992px, 1200px, and 1400px. Rather than targeting specific devices, design for content breakpoints — add a breakpoint wherever your layout breaks, not at arbitrary device widths. This previewer lets you test at any custom width to find exactly where your design needs adjustment.
Essential terms and definitions related to Responsive Breakpoint Previewer.
The visible area of a web page in the browser window. On mobile devices, the viewport width is set by the <meta name="viewport"> tag. The CSS viewport size (measured in CSS pixels or device-independent pixels) is what CSS media queries respond to — not the physical screen resolution. Understanding the viewport is essential for responsive web design.
A specific viewport width at which a responsive layout changes its structure or styling. Breakpoints are implemented using CSS @media queries with min-width or max-width conditions. Common breakpoint widths follow device categories: ~640px (large phones), ~768px (tablets), ~1024px (small laptops), ~1280px (desktops). Tailwind CSS uses sm, md, lg, xl, 2xl as breakpoint prefixes.
A CSS feature that applies styles conditionally based on device characteristics like viewport width, height, orientation, color scheme, or resolution. The most common pattern is @media (min-width: 768px) { } which applies styles only when the viewport is 768px or wider. Media queries are the foundation of responsive web design.
An abstract pixel unit used by CSS that may map to multiple physical hardware pixels. On a 2x Retina display, 1 CSS pixel = 4 physical pixels (2×2 grid). The ratio between physical pixels and CSS pixels is the device pixel ratio (window.devicePixelRatio). All viewport dimensions and CSS measurements use device-independent pixels, which is why an iPhone 14 has a CSS width of 390px despite a physical resolution of 1170px.
Many websites set the X-Frame-Options or Content-Security-Policy HTTP headers to prevent their pages from being loaded inside iframes. This is a security measure to prevent clickjacking attacks. When a site blocks iframe embedding, the preview will show a blank page or an error. Solution: use the HTML mode — copy the page source or paste your own HTML to preview it without iframe restrictions.
Yes. All device presets use the CSS viewport dimensions (device-independent pixels) reported by each device's browser. For example, iPhone 14 is 390×844 CSS pixels (not the physical resolution of 1170×2532 hardware pixels). These are the dimensions that CSS media queries and responsive breakpoints respond to.
Tailwind uses a mobile-first breakpoint system with min-width media queries: sm (≥640px), md (≥768px), lg (≥1024px), xl (≥1280px), 2xl (≥1536px). Styles without a breakpoint prefix apply at all sizes. This tool highlights which breakpoints are active at the current preview width, making it easy to understand which responsive classes will apply.
Yes. In HTML mode, you can paste complete HTML including <link> tags to external stylesheets, inline <style> blocks, and <script> tags. The HTML is rendered in a sandboxed iframe, so your CSS framework (Tailwind, Bootstrap, etc.) will load and apply normally. Include the CDN link in your HTML to test with any framework.
The Rotate button swaps the width and height values. For example, iPhone 14 in portrait is 390×844, and in landscape it becomes 844×390. This is the same behavior as rotating a physical device. CSS media queries respond to the new width, so breakpoints may change when you rotate — exactly as they would on a real device.
Common errors developers encounter and how to resolve them.
Preview shows blank white page for URL mode The website likely blocks iframe embedding via X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none' headers. Most major websites (Google, Facebook, GitHub) enforce this restriction. Use HTML mode instead: open the target URL in a new tab, view source (Ctrl+U), copy the HTML, and paste it into the HTML input for local preview.
CSS media queries not responding to preview width changes CSS media queries inside an iframe respond to the iframe's own width, not the parent page width. If your media queries appear unresponsive, verify that the iframe width matches the expected breakpoint by checking the dimension display above the preview. Also ensure your media queries use min-width (not device-width) as this is the modern responsive design approach.
External fonts or images not loading in HTML preview When using HTML mode with srcdoc, relative URLs for fonts, images, and stylesheets will not resolve because there is no base URL. Use absolute URLs (starting with https://) for all external resources. For Google Fonts, include the full <link> tag. For images, use complete URLs or base64 data URIs.