Mobile Viewer

Mobile viewer & mobile simulator: preview websites in mobile view, add devices, and test responsive layouts.

📱 This mobile view extension places phone and tablet previews alongside the desktop version. Use the mobile simulator to compare website layouts, try interactions, and save screenshots or videos for your team. 📱 Device previews 🔄 Sync actions 📐 Custom viewport 📸 PNG screenshots 🎥 Video demos 🧪 Layout testing 🚀 GET STARTED WITH Mobile Viewer 1. Open a page in Chrome and launch the extension to preview its mobile layout. 2. Pick a phone preset. Add a tablet or a custom size for comparison. 3. Explore the website in mobile view: scroll, open the menu, and try a form. 4. Rotate a view and save a screenshot or video when you find an issue. 🪟 ONE WEBSITE, SEVERAL SIZES Keep the desktop visible while you compare up to five phone, tablet, or custom views in the mobile viewer. Check whether headlines, images, and buttons fit together at the selected screen size. ◆ Narrow phone: inspect text wrapping and button placement. ◆ Larger phone: compare image crops and the space between elements. ◆ Tablet: review columns, navigation, and card grids. ◆ Custom width: explore the layout just below a CSS breakpoint. Use this responsive viewer to check whether a longer headline hides the main action. ✨ TOOLS FOR MOBILE WEBSITE TESTING 📲 Device presets — Use the phone simulator to choose from 25 presets, including iPhone and Android sizes. Compare layouts at sizes used by Samsung Galaxy and other Android phones. 🖼️ iPhone mockup — Use the device site viewer to preview your page inside a phone frame for a design review or client demonstration. 📐 Custom dimensions — Set width, height, and pixel ratio in the device simulator; save a custom device for later. 🔁 Screen rotation — Switch between portrait and landscape to inspect shorter screens. 📸 PNG capture — Save a device screenshot from the mobile viewer to document a layout or share an issue. 🎥 Video recording — Record scrolling, a menu interaction, or a form problem for your testing team. 🧭 Browser simulator — Open the viewer from your current Chrome tab without a separate app. 💾 Saved preferences — Keep your settings and custom devices in Chrome for future reviews. 🔄 FOLLOW THE SAME JOURNEY The mobile viewer syncs supported interactions across views: • Scrolling through the page. • Clicking links or opening menus. • Typing into supported fields. • Hover and focus interactions. With Sync on, follow the same journey at several screen sizes. Turn it off to inspect one view independently. 🧭 MENU AND FORM TESTING Run a mobile-friendly test to check how menus and forms work on smaller screens: ✓ Open the menu in mobile view and reach each link. ✓ Close the menu and check that the page remains usable. ✓ Read field labels and validation messages without sideways scrolling. ✓ Check whether a long error message pushes Submit out of view. ✓ Inspect sticky headers and overlays for covered content. 🛍️ PRODUCT CARDS AND LANDING PAGES Review real content in mobile view: long product names, banners, headings, and uneven image sizes. ➤ Product cards: compare prices, badges, image crops, and action buttons. ➤ Product grids: look for squeezed text or columns that fail to stack. ➤ Landing pages: check the heading, offer, and main call to action. ➤ Banners and dialogs: make sure fixed elements leave room to read. 📐 RESPONSIVE DESIGN TESTING AT BREAKPOINTS Use this responsive testing tool to inspect how media queries change a responsive website: menus, buttons, and column counts. ① Choose a width just below a CSS breakpoint. ② Add a second view just above it. ③ Compare spacing, text wrapping, and content order. ④ Rotate a device in the viewer and inspect the shorter layout. 🛠️ WHO IS IT FOR? • Developers — Use the mobile simulator alongside your mobile development tools to inspect responsive CSS, media queries, and breakpoints. • Designers — Use the mobile website viewer to review hierarchy, spacing, image crops, and responsive design before handoff. • QA testers and QA teams — Compare website behavior at several sizes during QA testing and capture a reproducible layout issue. Use previews for early device testing before final checks on physical devices. • Site owners and agencies — Use the phone simulator to review website updates or record client demos. 📌 TURN A CHECK INTO A BUG REPORT Help a tester repeat the problem in the viewer or on a real device. Attach a screenshot of the layout or a video of the steps: Page: URL of the affected screen. Device: preset name or custom width, height, and pixel ratio. Orientation: portrait or landscape. Steps: what you clicked, typed, or opened. Result: what appeared and what you expected. Example: “At 390 px, opening the menu hides the close button.” After the fix, recheck this size and a neighboring width. 💬 QUICK ANSWERS ❓ How many views can I compare? 💡 Up to five presets or custom sizes. ❓ Is this a device emulator? 💡 The phone simulator shows device-sized views in Chrome, without running iOS or Android. Verify releases on real devices. ❓ Does it check mobile-first indexing? 💡 No. It supports visual content review, but does not check indexing, SEO, or rankings. 🌐 WEBSITE SUPPORT ✅ HTTPS pages and local sites such as localhost or 127.0.0.1. 🚫 Browser-internal pages, Chrome Web Store, PDFs, and remote plain-HTTP pages are unsupported. 📎 BEFORE SHARING • This is a manual visual check, not an automated test score. • Separate views can repeat requests or actions. Turn Sync off before one-time submissions. • Screenshots and videos are saved locally. Review them for private information before sharing. 🌟 CHECK YOUR NEXT UPDATE Choose a device → Compare mobile view → Try an interaction → Capture the result. Mobile Viewer gives you a mobile simulator to compare responsive layouts across screen sizes and spot layout issues on real pages.