Why do some websites show a blank screen or refuse to connect?

Websites that send the 'X-Frame-Options: DENY' or 'Content-Security-Policy: frame-ancestors' HTTP response header deliberately prevent themselves from being embedded inside iframes on other domains (like Google, Facebook, or Twitter for clickjacking protection). To test those sites, use our built-in HTML Code mode or proxy mode.

What is the difference between CSS pixels and physical device pixels?

Physical pixels represent the actual tiny light emitters on a screen (e.g. 1179 x 2556 on an iPhone). CSS pixels (viewport points) are logical units used by browsers (e.g. 393 x 852 on an iPhone with a Device Pixel Ratio of 3x). Responsive media queries test against CSS viewport pixels.

Can I test local development websites like localhost?

Yes! If you enter an active localhost URL (e.g. http://localhost:3000), your browser will render your local development server inside the mobile viewport since the request executes client-side from your own computer.

Does this tool simulate touch gestures?

Yes. The sandboxed viewport supports mouse-driven drag-to-scroll gestures and responsive touch breakpoints to simulate mobile browsing behavior.

⚡ Instant Responsive Web Design & Viewport Simulator

Mobile Viewer: Test Websites on Mobile Screens

Preview any website or HTML code snippet across real iPhone, Android, and iPad viewports. Test portrait and landscape orientations, zoom levels, and custom screen resolutions in real time.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { font-family: sans-serif; text-align: center; padding: 2rem; background: #f0fdf4; color: #166534; }
    h1 { font-size: 1.5rem; }
    p { font-size: 1rem; line-height: 1.6; }
    .btn { background: #16a34a; color: white; padding: 0.75rem 1.5rem; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Responsive Mobile Preview</h1>
  <p>This custom HTML is rendering inside a simulated mobile viewport!</p>
  <button class="btn">Interactive Button</button>
</body>
</html>

Device Model iPhone 15/16 Pro

Viewport Size (CSS) 393 × 852 px

Orientation Portrait

Aspect Ratio 9:19.5

How to Test Mobile Responsiveness in 3 Steps

Enter Website URL or Code

Enter any public website URL, local development server (e.g. localhost:3000), or toggle to Code Sandbox to test raw HTML/CSS.

Select Viewport Breakpoints

Choose from popular device presets (iPhone, Galaxy, iPad) or test critical CSS responsive breakpoints (375px, 414px, 768px, 1024px).

Rotate & Audit Touch Layout

Switch between Portrait and Landscape orientations to inspect navigation drawers, touch targets, horizontal scrolling, and font readability.

The Complete Guide to Mobile Web Viewports & Responsive Testing

With over 60% of global web traffic originating from mobile devices, mobile-friendly responsive web design is a critical ranking factor in Google's Mobile-First Indexing algorithms.

CSS Viewport Pixels vs Physical Screen Pixels (DPR Explained)

Modern smartphones feature ultra-high-density displays (such as Apple Super Retina XDR or Samsung Dynamic AMOLED). These screens use a Device Pixel Ratio (DPR) of 2x or 3x:

Physical Pixels: The microscopic hardware LEDs physically embedded in the glass (e.g. 1179 x 2556 pixels on an iPhone 15 Pro).
CSS Viewport Pixels (Logical Points): The software units used by web browsers to calculate layouts and media queries (e.g. 393 x 852 px).
Why It Matters: Responsive CSS media queries like @media (max-width: 480px) evaluate logical CSS viewport pixels, not physical screen pixels. Our tool accurately simulates logical CSS dimensions.

Why Some Websites Block Being Viewed in an Iframe

If you enter certain websites (like Google, Twitter, or Amazon) and see an error or blank screen, the website has enabled security protections against Clickjacking via the following HTTP headers:

X-Frame-Options: DENY or SAMEORIGIN
Content-Security-Policy: frame-ancestors 'none'

These security headers are strictly enforced by your browser to prevent third-party sites from secretly embedding login forms. To test layouts of sites with iframe restrictions, use our built-in Code Sandbox tab to paste HTML/CSS directly.

Popular Device Viewport Dimensions & Breakpoints Matrix

Reference guide of standard mobile device viewports, CSS dimensions, device pixel ratios, and aspect ratios:

Device Model	CSS Viewport (W × H)	Device Pixel Ratio (DPR)	Aspect Ratio	Category
Apple iPhone 15 / 16 Pro	393 × 852 px	3.0x	9:19.5	Mobile Flagship
Samsung Galaxy S24 Ultra	412 × 915 px	3.0x	9:20	Mobile Large
Google Pixel 9 / 9 Pro	412 × 924 px	2.62x	9:20	Mobile Flagship
Apple iPhone SE / 8	375 × 667 px	2.0x	16:9	Mobile Compact
Apple iPad Air (11-inch)	820 × 1180 px	2.0x	1:1.44	Tablet Portrait
Standard Mobile Breakpoint	360 × 640 px	1.0x - 3.0x	9:16	Global Baseline

Frequently Asked Questions

How can I test my local development site (localhost)?

Simply type your local development URL into the address bar (e.g. http://localhost:3000 or http://127.0.0.1:8080) and click Load URL. Because our tool runs locally inside your browser, it has direct access to your machine's local ports.

Can I test how my site looks in landscape mode?

Yes. Click the 🔄 Rotate button in the toolbar. It instantly swaps the viewport width and height to simulate turning a mobile phone sideways into landscape orientation.

Does this tool consume my bandwidth or send my site data to a server?

No. 100% of the emulation runs client-side inside your browser using standard HTML5 sandboxed iframes. No website URLs or user data are ever uploaded or tracked.