How to Test a Website Screenshot on an iPhone 14 Viewport in Firefox
Use Firefox Responsive Design Mode to check an iPhone 14-sized layout and capture it. Learn which viewport settings matter and what emulation cannot verify.
To check a website at an iPhone 14 viewport in Firefox, open Responsive Design Mode (RDM), choose an iPhone 14 device preset if one is available, confirm its CSS viewport dimensions and device pixel ratio (DPR), then use the camera button to save a screenshot. If the preset is missing, create a custom device using the dimensions and DPR shown in Firefox’s device details or measured on an iPhone. Do not use the phone’s physical screen resolution as its CSS viewport size.
Firefox emulation is useful for responsive layout checks, but it does not prove that the page renders exactly as it does in iOS Safari on a real iPhone. Test on an iPhone or iOS simulator when platform-specific rendering or behavior matters.
1. Open Responsive Design Mode
- Open the page you want to inspect in desktop Firefox.
- Open Developer Tools and select Responsive Design Mode, or use Ctrl+Shift+M on Windows or Linux. On macOS, use Cmd+Opt+M.
- RDM opens with a responsive viewport. Firefox documents an initial content area of 320 × 480 CSS pixels; that is only the starting size, not an iPhone 14 specification.
Mozilla’s Responsive Design Mode documentation covers the device selector, viewport sizing, touch simulation, DPR, and screenshot capture.
2. Select or create an iPhone 14 device
Open the device selector. If an iPhone 14 preset is listed, select it and inspect its properties before relying on it. Firefox’s device list can change; Mozilla mentions iPhone 14 among previous-generation devices to consider, but that does not guarantee it is installed in your version.
If there is no suitable preset, use Edit list if available or configure a custom device. Give it a recognizable name and set the viewport width, height, DPR, user agent, and touch support to suit the test. Use Firefox’s own selected-device details or values measured on hardware for the intended CSS viewport and DPR. The research sources do not establish one exact iPhone 14 CSS viewport and DPR pair, so avoid copying an unverified number.
| Setting | What it controls | When to check it |
|---|---|---|
| Viewport width and height | The layout area in CSS pixels; responsive breakpoints use this size. | Every layout and screenshot check. Set portrait or landscape intentionally. |
| DPR | The relationship between CSS pixels and device pixels, affecting density-sensitive rendering and image selection. | When checking high-density assets or matching a particular device. |
| Touch simulation | Whether Firefox translates mouse events into touch events in RDM. | When the interface changes for touch input. |
| User agent | The browser identity string presented to the page. | When the page serves different content based on browser identity. |
| Orientation | Portrait or landscape viewport dimensions. | When layout behavior differs by orientation. |
These controls emulate selected conditions; they do not turn desktop Firefox into iOS Safari. Mozilla notes that when an iPhone is selected, Firefox identifies itself as Safari. That is user-agent emulation, not execution in Safari on iOS.
3. Check the responsive layout
- Set the intended width and height in CSS pixels. You can edit the displayed dimensions or drag the viewport. Check both portrait and landscape if both matter.
- If you changed touch or user-agent settings and the page does not respond to the change, reload it. Some pages attach handlers only when they load, and RDM reload behavior depends on its settings.
- Inspect navigation, text wrapping, forms, fixed controls, overflow, and any content that appears only at narrow widths.
- Check the document’s viewport metadata. A typical responsive page uses
<meta name="viewport" content="width=device-width, initial-scale=1">so the layout viewport matches the device width. See MDN’s guide to the viewport meta element.
CSS viewport dimensions and physical screen resolution describe different things. Apple lists the iPhone 14 panel as 2532 × 1170 pixels at 460 ppi; those are physical display specifications, not values to type into RDM as the CSS viewport. See Apple’s iPhone 14 technical specifications.
4. Capture a screenshot
Click the camera button in RDM to save a screenshot of the emulated viewport. Firefox saves it to the configured download location, or can copy it to the clipboard if that behavior is enabled. This is the appropriate capture for a viewport test.
If you need the entire document rather than the visible viewport, use Firefox’s separate screenshot interface and its Save full page option. The full-page capture is a different artifact from the RDM viewport screenshot; see Mozilla Support’s screenshot instructions.
5. Know when emulation is not enough
Use RDM for quick checks of CSS breakpoints, viewport-specific layout, and some touch-conditioned interface changes. Verify on an actual iPhone or an iOS simulator when you need confidence in iOS rendering, browser chrome, input behavior, or safe-area details. Apple’s Safari Responsive Design Mode documentation also describes differences between iOS-family rendering and macOS.
Common problems and fixes
| Symptom | Likely cause | What to do |
|---|---|---|
| The page does not switch to its mobile layout. | The viewport width is too wide, or the page lacks suitable viewport metadata. | Confirm the CSS width in RDM and check for width=device-width in the viewport meta element. |
| The screenshot dimensions look much larger than expected. | DPR affects device-pixel output, or the wrong capture mode was used. | Confirm the selected device’s DPR and whether you captured the RDM viewport or the full page. |
| The device picker has no iPhone 14. | The available device list varies. | Create a custom device and enter verified viewport and DPR values; do not substitute the panel resolution. |
| Touch-specific controls do not appear. | Touch simulation is off, or the page initialized its event handlers before the setting changed. | Enable touch simulation and reload the page. |
| The result differs from an iPhone. | Desktop Firefox is emulating a responsive viewport, not reproducing the complete iOS platform. | Validate platform-dependent behavior on an iPhone or iOS simulator. |
| The screenshot is not in the expected folder. | Firefox uses its configured download location or clipboard setting. | Check the browser’s downloads and screenshot preferences. |
Performance, reliability, and cost
RDM is a quick local workflow and does not require buying an iPhone just to set a viewport and capture an image. Its reliability depends on using the intended viewport, DPR, orientation, and page state; emulation alone cannot establish actual iOS behavior. For repeatable comparisons, record those settings with the screenshot and use the same page state each time. For broader responsive design context, see MDN’s guide to responsive web design.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. A single request can return an image or PDF. The API supports custom viewport and device settings, among its capture options. See the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);These examples capture the target URL; add the documented viewport settings for the device you need. ScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers say which verdict and billing status applied. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
FAQ
Do I need to buy an iPhone 14 to test this layout?
No. RDM can emulate a responsive viewport for layout checks. Use hardware or an iOS simulator when the test depends on platform behavior.
Should I enter 2532 × 1170 in Firefox?
No. That is the iPhone 14 panel’s physical resolution. Set the CSS viewport dimensions shown for the selected device or verified for your test.
Does selecting iPhone in Firefox mean I am testing Safari on iOS?
No. Firefox can change its user-agent identity in RDM, but the page still runs in desktop Firefox.
How do I save only the visible iPhone-sized view?
Use RDM’s camera button. Use Firefox’s full-page screenshot option only when you want the whole document.
