Paste HTML or enter a URL to preview at iPhone, iPad, and desktop viewport sizes side-by-side with real iframe rendering.
Type the website URL you want to preview responsively.
Select phone, tablet, laptop, or desktop viewport widths.
View your site at different screen sizes side by side.
This tool renders the same page in three real iframes at iPhone, iPad, and desktop viewport sizes, arranged side by side so you can judge a layout at three widths at once. Paste self-contained HTML into the field to preview your own markup, or enter a URL to load a live page into all three panes. The surprise most people hit first: popular sites often come back as blank panes because they forbid being embedded in a frame - the page is fine in a normal tab, but the target site's security headers refuse the iframe.
A concrete input and expected output from the current implementation.
Input
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 16px; }
@media (max-width: 600px) { body { background: #fff3cd; } }
</style>
</head>
<body>
<h1>Sale ends Friday</h1>
<p>Free delivery on orders over $50, while stock lasts.</p>
</body>
</html> Expected output
Three panes side by side, labeled iPhone, iPad, and desktop, each showing the heading and the paragraph. The iPhone pane has a pale yellow background; the iPad and desktop panes keep the default background. The paragraph reflows into a narrower column in the phone pane.
The style rule fires only below 600px. The phone viewport measures well under 600px, while the iPad and desktop viewports measure well above it, so the background change appears in exactly one pane - a live demonstration that each pane evaluates media queries against its own width.
The field takes either self-contained HTML or a URL. Pasted markup is rendered as-is in each of the three panes; a URL is loaded by each pane as a live page. Both modes produce the same iPhone, iPad, and desktop layout, but the inputs behave differently: pasted markup travels with the preview and must carry its own assets, while a URL brings the real page with its scripts and styles.
Each pane is an iframe, and an iframe has its own viewport: the tool fixes each pane's width while the host page keeps your size, so layout media queries evaluate per pane. What an iframe does not change is the browser identity or input capabilities - the page still sees your desktop browser, so sites that branch on user agent, hover, or pointer can show desktop behavior in the phone pane.
Because the pane is your desktop browser in a phone-sized viewport, not a phone. Pane width drives layout media queries, but the user agent, input capabilities, and font rendering are still your desktop's, and touch gestures are absent. Use the tool for layout and reflow; verify gestures, performance, and rendering on real hardware.
Usually not usefully. An authenticated page needs your session cookies, and the preview runs in its own browsing context with no access to the tabs where you are signed in; most browsers also block the third-party cookies such an embedded page would receive. Expect the logged-out view or a login screen, and test authenticated flows on the real site.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Create professional HTML email signatures with logos, social links, and custom styling.
Paste HTML email code and preview it in simulated email client frames (Gmail, Outlook, Apple Mail). Responsive test.
Fill in vCard fields and generate a QR code plus styled digital business card. Download both as images.
Visual drag-and-drop email template builder. Add sections, images, buttons, and export clean HTML code.
Create Open Graph meta tags for perfect social media previews on Facebook, Twitter, and LinkedIn.
Input one brand color and auto-generate a full color system with shades, tints, semantic colors, and dark mode palette.