Responsive Design Tester

Preview your HTML at any screen size. Test device breakpoints, compare viewports side by side, and toggle orientation.

Paste your HTML
Paste HTML above and select a device to preview your layout.

How to Use the Responsive Design Tester

  1. Paste your HTML — Include a full HTML document with inline styles or a <style> block for best results.
  2. Select a device — Click any device preset (iPhone SE, iPad, Laptop, etc.) to preview at that viewport.
  3. Toggle orientation — Switch between portrait and landscape to test both orientations.
  4. Custom mode — Enter any width and height to test specific breakpoints.
  5. Side-by-Side — See mobile, tablet, and desktop viewports simultaneously to compare layouts.
Note on URL previews: Most live websites send security headers (X-Frame-Options, Content-Security-Policy) that prevent iframe embedding. For testing your own HTML, use the paste area above. For live sites, use your browser's built-in DevTools (F12 → Device Toolbar), which has direct access to the page.

Understanding Responsive Design Breakpoints

Responsive design is the practice of building web interfaces that adapt their layout and typography to different screen sizes. This is achieved using CSS media queries — conditional rules that apply styles only when the viewport meets certain conditions, most commonly a minimum or maximum width.

Common Breakpoints

  • 320–375px — Small to medium phones (iPhone SE, Galaxy A series)
  • 390–430px — Modern large phones (iPhone 14/15, Pixel 7)
  • 768px — Tablets in portrait mode (iPad, Android tablets)
  • 1024px — Tablets in landscape, small laptops
  • 1280–1366px — Standard laptop screens
  • 1440–1920px — Desktop monitors

Mobile-First vs. Desktop-First

Mobile-first means writing base CSS for mobile screens, then adding @media (min-width: ...) queries to enhance the layout for larger screens. This produces smaller CSS for mobile users (who often have slower connections) and is the approach recommended by all major frameworks including Tailwind CSS, Bootstrap 5, and Material Design. Desktop-first does the opposite — starting with desktop styles and using @media (max-width: ...) to adapt for smaller screens.

The Viewport Meta Tag

Every responsive page needs <meta name="viewport" content="width=device-width, initial-scale=1.0"> in its <head>. Without it, mobile browsers render the page at a virtual 980px wide and scale it down, making text tiny and layouts broken. This meta tag tells the browser to use the actual device width as the viewport width, allowing media queries to work correctly.

Testing Beyond This Tool

While this tool is great for quick HTML prototyping, the gold standard for responsive testing is browser DevTools. Chrome DevTools (F12) provides device simulation with network throttling, touch event simulation, and CPU throttling to simulate low-end devices. For production sites, also test on real physical devices since some touch interactions and system fonts can only be tested on actual hardware. Also try our Aspect Ratio Calculator to plan your image and video dimensions across breakpoints.

Frequently Asked Questions

Most modern websites send an X-Frame-Options or Content-Security-Policy header that prevents their pages from being embedded in iframes. This is a security measure to prevent clickjacking attacks. For testing live sites, use your browser's built-in DevTools (F12 > Device Toolbar). For testing your own HTML, use the HTML paste mode in this tool.
The most commonly used CSS breakpoints are: 320px (small phones), 375–390px (modern iPhones), 768px (tablets), 1024px (large tablets / small laptops), 1280–1366px (laptops), and 1920px (desktops). Tailwind CSS uses 640px, 768px, 1024px, 1280px, and 1536px.
Screen width is the physical display resolution. Viewport width is the width the browser uses for CSS media queries. On mobile, viewport width is typically 375–430px for iPhones, even though the physical pixel count is much higher (due to device pixel ratio of 2–3×).
Mobile-first means writing CSS that works for small screens by default, then using min-width media queries to add styles for larger screens. This produces leaner CSS and ensures mobile users get a fast, uncluttered experience. All major modern CSS frameworks use mobile-first conventions.
Open Chrome DevTools with F12, then click the device toolbar icon (or press Ctrl+Shift+M). You can select preset devices from the dropdown or set a custom viewport size. Chrome DevTools is the gold standard for testing live websites at different screen sizes.