📱 MultiView

Live responsive breakpoint tester. View your web application rendered side-by-side at multiple sizes simultaneously—no static screenshots, just pure live rendering.

---

MultiView is a browser-native web utility built for developers testing responsive layouts. Instead of toggling device modes inside Chrome DevTools one-by-one, MultiView renders your URL inside five live scaled iframes side-by-side.

---

🚀 Key Features

• ⚡ Live Interactive Testing: All viewports render live HTML/JS iframes. Click, scroll, and interact with all screens at once.
• 🔍 Global CSS Zoom Scaling: A customized range slider scales the viewports down (20% to 100%) using CSS transform: scale() so that large viewports (including Ultrawide 1920px) fit neatly onto standard laptop displays.
• 📱 Global Orientation Toggle: Rotate all viewports between Portrait and Landscape aspect ratios simultaneously.
• 🔄 Individual & Global Refresh: Reload all five frames together, or target a specific viewport using the inline refresh buttons.
• ⏳ Live Loading Indicators: In-header spinner animations activate when a viewport starts loading and hide automatically on iframe trigger completion.

---

📐 Layout & File Map

responsive-multiview/
├── index.html       # Control header bar & device viewport frame cards
├── style.css        # Dashboard system & custom math transform-scaling CSS
└── app.js           # URL sanitizers, sizing configurations, & iframe controllers

---

📊 Breakpoint Specifications

MultiView monitors your designs across five standard viewport categories:

Device Type	Portrait Resolution	Landscape Resolution	Icon
Mobile	375px × 740px	740px × 375px	smartphone
Tablet	768px × 1024px	1024px × 768px	tablet
Laptop	700px × 1024px	1024px × 700px	laptop
Desktop	900px × 1440px	1440px × 900px	monitor
Ultrawide	1080px × 1920px	1920px × 1080px	tv

---

🛠️ Usage Guidelines

1. Open index.html directly in any web browser.
2. Input your application link into the search console.

Important

Developer Security Notice: MultiView is designed primarily for testing local developer servers (e.g., http://localhost:3000 or http://127.0.0.1:8000). Public sites implementing security headers like X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors (such as Google or GitHub) block iframe embedding and will display as empty blank pages.

---

Tip

Use a local HTTP server for optimal local performance:

npx serve .
# OR
python3 -m http.server 8000

💖 Support the Project MultiView is built and maintained as a completely free, open-source tool. If it saves you time, helps your business, or you just want to support the project, feel free to buy me a coffee!

☕ Buy Me A Coffee ☕ Buy Me A Coffee