Test Responsive Screenshots of an Indian Web App at 375px

This guide shows you how to capture accurate responsive screenshots of an Indian web app at a 375px viewport width, the standard for iPhone SE and many Android devices. You’ll learn to use browser developer tools and command-line tools to generate consistent, device-specific screenshots for QA, design reviews, or documentation.

What You’ll Need

• A modern web browser (Chrome, Firefox, or Edge) with developer tools.
• Access to the web app you want to test (local or hosted).
• Optional: Node.js installed if you want to automate with Puppeteer.
• Optional: A screen ruler or a reference to check pixel dimensions.

Step-by-Step

1. Open the web app in your browser. Navigate to the page you want to test. Make sure you are logged in if the app requires it, and that you have the correct URL.
2. Open Developer Tools. Right-click anywhere on the page and select “Inspect,” or press F12 (Windows) / Cmd+Option+I (Mac). This opens the DevTools panel.
3. Enable device toolbar. In DevTools, click the device icon (a rectangle with a phone outline) in the top-left corner of the panel. This switches to responsive design mode.
4. Set the viewport to 375px. In the device toolbar, you’ll see a width and height field. Change the width to 375 and leave the height as is (or set it to a common value like 667 for iPhone SE). The page will re-render to that width.
5. Choose a device preset (optional). If you want a more accurate simulation, click the device dropdown (e.g., “Responsive”) and select “iPhone SE” or “Galaxy S8”. These presets set the correct device pixel ratio and user agent, which can affect how the app serves CSS and images.
6. Adjust the zoom (if needed). Some apps use a meta viewport tag that may scale content. Check that the page looks like it would on a real phone. If the text is too small or large, you can adjust the zoom in the device toolbar (usually a percentage dropdown).
7. Capture the screenshot. Click the three-dot menu (⋮) in the device toolbar and choose “Capture screenshot” (or “Capture full size screenshot” if you want the entire scrollable page). The screenshot is saved to your default Downloads folder as a PNG.
8. Verify the screenshot dimensions. Open the PNG file and check its width. It should be exactly 375 pixels. If it’s wider (e.g., 750px), that’s because the device pixel ratio is 2 (retina). That’s fine for high-DPI, but if you need exact CSS pixels, you can set the device pixel ratio to 1 in the device toolbar settings.
9. Repeat for different pages. Navigate to other pages of your app (home, product, checkout) and repeat steps 4–8 to get a consistent set of screenshots.
10. Automate (optional). If you need to do this regularly, use a tool like Puppeteer. Create a script that launches a headless browser, sets the viewport to 375px, and takes screenshots of multiple URLs. This saves time and ensures consistency.

Common Mistakes

• Forgetting to set the device pixel ratio. If you don’t set it, the screenshot might be 750px wide (for a 2x display) which can confuse stakeholders.
• Using the browser window resize instead of DevTools. Resizing the browser window to 375px includes the browser chrome (tabs, bookmarks), so the actual viewport is smaller. Always use the device toolbar.
• Not clearing cache. If the app serves different CSS based on user agent, you might see a desktop version. Clear the cache or use incognito mode.
• Capturing only the visible viewport. For a full-page screenshot, use “Capture full size screenshot” – otherwise you miss content that is below the fold.
• Ignoring the meta viewport tag. If the app doesn’t have <meta name="viewport" content="width=device-width">, the 375px setting might not actually apply. Check the HTML head.

Tips

• Use a consistent browser and version across your team to avoid differences in rendering.
• Name your screenshots with a clear convention, e.g., home-375px.png.
• For Indian apps that use regional languages, ensure the fonts are loaded and the text is not cut off – this is a common issue at narrow widths.
• Test both portrait and landscape orientations if your app supports them.
• If you need to share screenshots in a PDF, use a tool like “Full Page Screen Capture” extension or a Puppeteer script to generate a PDF with the correct viewport.

Troubleshooting

• Screenshot is still wider than 375px. Check the device pixel ratio setting. Set it to 1.0 in the device toolbar’s settings (the gear icon). Also, ensure you are not zoomed out (zoom should be 100%).
• The page doesn’t reflow at 375px. This often means the app doesn’t have a responsive layout. Check if there is a fixed-width container (e.g., min-width: 900px) in the CSS. You may need to fix the app’s CSS.
• Text is too small or overlaps. This is a responsive bug. Use DevTools to inspect the offending elements and adjust the CSS breakpoints. The screenshot is just a symptom – the underlying issue needs to be fixed in code.
• Images are broken or not loading. Some CDNs serve different image sizes based on user agent. If you’re using a device preset, it should simulate the correct user agent. If not, manually set the user agent in DevTools.
• Puppeteer screenshot looks different from DevTools. Puppeteer may not emulate the device scale factor by default. Set deviceScaleFactor: 1 in the viewport options to match DevTools.
• Cannot find the “Capture screenshot” option. In some browsers, you may need to click the three-dot menu in the device toolbar. If it’s missing, update your browser to the latest version.

Frequently Asked Questions

Why 375px specifically?

375px is the CSS width of the iPhone SE (1st and 2nd gen) and many Android phones in portrait mode. It’s a common minimum width for modern mobile design, so testing at this size ensures your app works on the smallest mainstream screens.

Do I need a real device?

No, but it helps for final verification. Browser DevTools simulate the viewport accurately for layout purposes, but real devices may have different rendering engines or fonts. Use DevTools for quick checks and real devices for final QA.

How do I capture a full-page screenshot?

In DevTools, click the three-dot menu in the device toolbar and select “Capture full size screenshot.” This will capture the entire scrollable page, not just the visible area.

What if the app uses a different breakpoint?

If your app has a breakpoint at, say, 400px, then testing at 375px might show the mobile layout, but you should also test at 400px and 414px (iPhone Plus) to cover all ranges. The 375px is a starting point, not the only width.

Can I automate this for multiple pages?

Yes, using Puppeteer or Playwright. You can write a script that loops through URLs, sets the viewport to 375px, and saves screenshots. This is ideal for regression testing.

Why is my screenshot 750px wide instead of 375px?

That’s because the device pixel ratio (DPR) is set to 2 (retina). The screenshot captures physical pixels. To get a 375px wide image, set the DPR to 1 in the device toolbar settings or use a tool that outputs CSS pixels.

Related

• How to Use Wireless ADB on Android
• Back Up a Failing Hard Drive Before It Dies
• Android Package Name in Use: Error & Fix