Responsive Preview Tool

Paste HTML or enter a URL to preview at iPhone, iPad, and desktop viewport sizes side-by-side with real iframe rendering.

HTML Content

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #333; }
    .hero { background: linear-gradient(135deg, #BB8800, #FF6B35); padding: 40px 20px; text-align: center; color: white; }
    .hero h1 { font-size: clamp(24px, 5vw, 48px); margin-bottom: 12px; }
    .hero p { font-size: clamp(14px, 2.5vw, 18px); opacity: 0.9; max-width: 600px; margin: 0 auto; }
    .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
    .card { background: #f9f9f9; border-radius: 12px; padding: 24px; text-align: center; }
    .card h3 { font-size: 18px; margin-bottom: 8px; color: #BB8800; }
    .card p { font-size: 14px; line-height: 1.5; color: #666; }
    .cta { text-align: center; padding: 40px 20px; }
    .btn { display: inline-block; padding: 14px 32px; background: #BB8800; color: white; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px; }
    footer { background: #222; color: #999; text-align: center; padding: 20px; font-size: 12px; }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Responsive Design</h1>
    <p>This sample page demonstrates responsive behavior across different device sizes. Try editing the HTML!</p>
  </div>
  <div class="features">
    <div class="card"><h3>Mobile First</h3><p>Designed for phones, then enhanced for larger screens.</p></div>
    <div class="card"><h3>Fluid Grids</h3><p>Content adapts naturally to any viewport width.</p></div>
    <div class="card"><h3>Media Queries</h3><p>Fine-tune layouts at specific breakpoints.</p></div>
  </div>
  <div class="cta"><a href="#" class="btn">Get Started</a></div>
  <footer>Built with responsive design principles</footer>
</body>
</html>

iPhone375px

9:41

iPad768px

9:41

Desktop1440px

localhost:3000

iPhone

375 x 812

iPad

768 x 1024

Desktop

1440 x 900

Iframes render at native device width and are scaled down to fit your screen. This simulates how CSS media queries and responsive layouts behave at each viewport size. Scripts are sandboxed for security.

How to Use Responsive Preview Tool

1

Enter a URL

Type the website URL you want to preview responsively.
2

Choose device sizes

Select phone, tablet, laptop, or desktop viewport widths.
3

Compare layouts

View your site at different screen sizes side by side.

Related Tools

Email Signature Generator

Create professional HTML email signatures with logos, social links, and custom styling.

Email HTML Previewer

Paste HTML email code and preview it in simulated email client frames (Gmail, Outlook, Apple Mail). Responsive test.

QR Code Business Card

Fill in vCard fields and generate a QR code plus styled digital business card. Download both as images.

Color Contrast Checker

Enter two colors and check WCAG AA/AAA contrast ratios. Live preview of text on background with pass/fail badges.

Readability Score Checker

Analyze text readability using Flesch-Kincaid, Gunning Fog, and other scoring methods.

HTML Email Builder

Visual drag-and-drop email template builder. Add sections, images, buttons, and export clean HTML code.