Mobile Switcher
Chrome extension that simulates mobile and tablet viewports for responsive testing. Click the extension icon to overlay a device-sized iframe on any page with an inline device picker panel.
Built with WXT + Svelte 5 + TypeScript.
Features
- One-click activation from the toolbar icon
- 18 device presets (iPhone, Pixel, Galaxy, iPad, Surface Pro)
- Portrait / landscape toggle
- Scales device frame to fit your screen
- Side panel for switching devices without leaving the page
- Persists across page reloads -- close explicitly to exit
- Syncs iframe URL back on close so navigation is preserved
- Hidden scrollbars for realistic mobile feel
Devices
| Phone | Viewport |
|---|---|
| iPhone 16 Pro Max | 440 x 956 |
| iPhone 16 Pro | 402 x 874 |
| iPhone 15 | 393 x 852 |
| iPhone 14 | 390 x 844 |
| iPhone SE | 375 x 667 |
| Pixel 9 | 412 x 915 |
| Pixel 8 | 412 x 892 |
| Galaxy S24 | 360 x 780 |
| Galaxy Z Fold 5 (folded) | 344 x 882 |
| Small phone (320) | 320 x 568 |
| Tablet | Viewport |
|---|---|
| iPad Pro 12.9" | 1024 x 1366 |
| iPad Pro 11" | 834 x 1194 |
| iPad Air | 820 x 1180 |
| iPad Mini 7 | 744 x 1133 |
| Galaxy Z Fold 5 (open) | 904 x 882 |
| Galaxy Tab S10 | 800 x 1340 |
| Galaxy Tab S9 | 800 x 1280 |
| Surface Pro | 912 x 1368 |
| Tablet (768) | 768 x 1024 |
Install
From source
git clone https://github.com/mynk-tmr/mobile-switcher.git
cd mobile-switcher
pnpm install
pnpm build
Then load .output/chrome-mv3 as an unpacked extension in chrome://extensions (Developer mode).
Development
pnpm dev # dev mode with hot reload
pnpm build # production build
pnpm zip # package for Chrome Web Store
Tech
- WXT -- extension framework (Vite-based, MV3)
- Svelte 5 -- UI reactivity
- TypeScript -- type safety
- chrome.storage -- persist device selection and active state
- chrome.scripting -- inject simulator content script on demand
License
MIT
