Pocket Viewport

Preview any page on 100+ phones, tablets and foldables: exact viewports, browser toolbars, touch emulation, side-by-side compare.

Pocket Viewport shows the page you're working on inside realistic phone, tablet and foldable frames, right in your browser. It's built for web designers and front-end developers who want a quick, accurate responsive check without picking up a phone for every change. Click the toolbar icon on any page (localhost and staging work too) and it opens in a preview tab. WHAT IT DOES • 101 device presets, grouped and searchable: – Apple iPhone: 8 through the 18 Pro, including SE, mini, Plus, Pro Max, 16e and Air – Apple iPad: mini, iPad, Air and Pro – Google Pixel: 6a through 10 Pro XL – Samsung Galaxy: S20 Ultra through S25 Ultra, Note20 and A-series – OnePlus, Xiaomi, Redmi and Motorola – Android tablets and common laptop and desktop widths • Foldables and dual-screen devices: – Galaxy Z Fold and Z Flip, Pixel 9 Pro Fold and iPhone Duo, folded and unfolded – Surface Duo and Duo 2, single-screen and spanned with the hinge gap • Exact CSS viewport sizes and pixel ratios, so your media queries and breakpoints trigger as they would on the device • Mobile user agents for each device, sent in the request and visible to page scripts. In multi view every frame loads its pages with its own device's user agent, so server-side mobile detection works per device • Browser toolbars: Safari on iPhone and iPad and Chrome on Android, drawn on the screen and taking up space like the real thing, so the page gets a realistic visible height (window.innerHeight, 100dvh, fixed bottom bars). They collapse as you scroll down and come back when you scroll up, or you can pin them expanded, collapsed or off • Real touch (one click): uses Chrome's built-in DevTools touch emulation on the preview tab, so your mouse acts as a finger. Taps, swipes and drags arrive as genuine touch and pointer events (pointerType "touch"), with native swipe and fling scrolling, touch-action support and a touch cursor. Carousels and sliders such as Swiper and Embla swipe as they do on a phone, including inside embedded iframes • Basic touch, always on for phones and tablets: mouse input becomes touch-style pointer events (pointerType "touch") and touch events, swipe-to-scroll with momentum that respects touch-action, taps that produce the usual compat mouse events and click, no hover events, and a touch-dot cursor. Hover/pointer media queries behave like a touchscreen in your stylesheets and in matchMedia • Device frames drawn from published specs for each model: notch, Dynamic Island, hole-punch or home button, screen corner radius, bezels, side buttons and finish colour • Rotate between portrait and landscape, zoom to fit or set any scale, and use a URL bar with back, forward and reload • Multi-device view: compare several devices side by side, with synced scrolling and optional synced navigation • Quick sets: Popular iPhones, Popular Android, Small → Large, Foldables, Tablets, iPhone vs Android • Custom devices: any width, height, pixel ratio and platform • One-click PNG screenshots of the device frames with transparent corners, ready for client decks • Light and dark themes. Your settings are remembered. PRIVACY Pocket Viewport doesn't collect, store or send any personal data. There are no analytics, accounts or servers. Settings stay in your browser's local extension storage. GOOD TO KNOW (honest limitations) • It isn't a real device. Pages render with your desktop browser's engine (Chromium), not Safari/WebKit or Android, so test on real hardware before you ship. • Toolbar heights come from measurements on real devices and published specs. They're close but can be a few pixels off a particular phone and browser version. • The pixel ratio is reported to page scripts, but the frame renders at your monitor's density. • Touch is single-finger: no pinch or multi-touch gestures in either mode. • Real touch needs Chrome's "debugger" permission. While it's on, Chrome shows a "started debugging this browser" bar, and it can't run while DevTools is open on the preview tab. Closing the bar switches back to basic touch. • Basic touch is a simulation. The final click event still reports a mouse, CSS :hover rules outside media queries can still react to the mouse, and iframes nested inside the previewed page get ordinary mouse input. • To show sites that normally block embedding, the extension removes their frame-blocking headers. It does this only for pages loaded inside its own preview tab. Some sites still detect being framed and won't display. • Pages in the preview count as third-party, so logins and some cookies may not carry over. • In multi view, each frame's page loads (first load, reload, back/forward and link clicks) carry that device's user agent. Images, scripts, API calls and form submissions share one user agent for the whole tab (the first device's). Page scripts always see each device's own user agent. Works in Google Chrome, Brave, Microsoft Edge and other Chromium-based browsers.