How to Capture a Website Screenshot with the iPhone Safe Area Visible
Capture a website in Safari with the iPhone status area visible, learn when to use Full Page, and understand safe-area insets for web layouts.
To capture a website with the iPhone safe area visible, open it in Safari, arrange the page so the status area and the content you want are both on screen, then take a normal screenshot. Keep the top edge in frame if the status indicators need to remain visible. On an iPhone with Face ID, quickly press and release the Side button and Volume Up together. On an iPhone with a Home button, quickly press and release the Side button and Home together. Review the saved screenshot before sharing it.
What “safe area visible” means
For a screenshot, this usually means the visible top of the iPhone screen—including status indicators—has not been cropped out. In web development, “safe area” has a different, related meaning: space where content can be placed without being obscured by interface elements such as status bars or toolbars. CSS safe-area insets help position website content around device edges; they are not a special screenshot setting.
Apple’s UIKit documentation defines a view’s safe area as the area not covered by bars and other obscuring views. WebKit describes CSS env(safe-area-inset-*) values for laying out content around device edges. These layout concepts can help a site avoid clipping, but the screenshot itself is made with the iPhone’s normal capture controls.
Take a normal Safari screenshot with the status area in frame
- Open Safari and navigate to the website and page state you want to show.
- Scroll and adjust the page so the status area and relevant website content are visible at the same time. If the status indicators matter, do not crop the top edge afterward.
- Take the screenshot using the button combination for your iPhone:
| iPhone type | Capture |
|---|---|
| Face ID model | Quickly press and release Side + Volume Up together. |
| Model with a Home button | Quickly press and release Side + Home together. |
Apple also lists AssistiveTouch, Back Tap, and voice command as alternative ways to take a screenshot. When the screenshot preview appears, inspect it, crop only if needed, and save it. Screenshots are saved to Photos by default.
Capture a full webpage on iPhone
Use Full Page when you need a long Safari webpage beyond the part currently visible on screen. Take a screenshot, tap Full Page in the preview, inspect the result, and save it as an image or PDF.
| Capture method | Scope | Output and framing |
|---|---|---|
| Normal screenshot | What is visible on the screen now | An ordinary screenshot image; arrange the status area and page content in the viewport before capture. |
| Full Page | The longer Safari webpage | Can be saved as an image or PDF. Apple’s instructions do not specify how the status bar appears in every Full Page result. |
If keeping the iPhone status indicators visibly in the image is the goal, use a normal screenshot and verify the saved image. Choose Full Page to show the longer document, and inspect the preview rather than assuming it will have the same framing as a viewport screenshot.
What is the safe area in web design?
On iPhone web layouts, safe-area inset values can help keep site content clear of screen edges and interface obstructions. For example, a page with edge-to-edge content can use env(safe-area-inset-top) or the corresponding bottom, left, and right values as layout padding. This affects where the page content is placed; it does not control whether the iPhone status area is included in a screenshot.
Apple’s UIKit guidance is for app view layout, and WebKit’s iPhone X guidance is foundational guidance for CSS safe-area variables. Treat these as layout references, not guarantees about how a particular iOS or Safari version will render a Full Page capture.
Or skip the browser setup
If you need a screenshot from code or an automated workflow, ScreenshotNeo is a website screenshot API and MCP server. A single request captures a URL as an image or PDF. It captures webpages in a browser environment, so it cannot reproduce an iPhone’s native status indicators or Safari chrome; use the iPhone steps above when those need to appear in the shot.
For API details and the available options, see the ScreenshotNeo documentation. This runnable cURL example saves a WebP screenshot of the target page:
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-o shot.webpPython:
import 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)Node.js:
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card.
Troubleshooting
| What happened | Likely cause | What to do |
|---|---|---|
| The top status area is missing | The image was cropped or the capture was a Full Page result with different framing. | Take a normal screenshot with the desired status area visible, and review the saved image before sharing. |
| The button combination did not take a screenshot | The button pair may not match the iPhone model, or the buttons were held instead of quickly pressed and released. | Use Side + Volume Up on Face ID models or Side + Home on Home button models. Try AssistiveTouch, Back Tap, or voice command if needed. |
| The webpage is cut off | A normal screenshot captures only the current visible screen. | Scroll to the desired portion or use Safari’s Full Page workflow for a long webpage. |
| Full Page does not show the expected status area | Full Page is a long-document capture, and status-bar rendering can vary. | Inspect the actual preview and saved result. Use a normal viewport screenshot when visible status indicators are essential. |
| A web layout runs too close to the device edge | The page may not account for safe-area insets. | Review the layout’s safe-area handling, including CSS env(safe-area-inset-*) values. This is a page-layout issue, not a screenshot-button setting. |
Reliability and framing checklist
- Confirm that the page is in Safari and the desired content is visible before capturing.
- For the status area, use a normal screenshot and check the image before sharing.
- For a long article, use Full Page and review its preview; choose image or PDF as needed.
- Crop only if the final framing allows it. Cropping the top edge removes the visible status area.
- For a website layout issue, adjust the page’s safe-area spacing separately from the screenshot workflow.
Frequently asked questions
How do I take a screenshot on iPhone?
Quickly press and release Side + Volume Up on a Face ID iPhone, or Side + Home on a model with a Home button. AssistiveTouch, Back Tap, and voice command are alternatives.
How do I keep the iPhone status bar visible in a website screenshot?
Make sure the status area is visible on screen, take a normal screenshot, and avoid cropping the top edge. Check the saved image.
Does Full Page include the status bar?
Apple’s reviewed instructions explain Full Page as a capture of an entire Safari webpage, but do not promise status-bar behavior for every iOS version and configuration. Inspect the result on the device.
Are safe-area insets a screenshot option?
No. They are layout values websites can use to position content around device edges. The iPhone screenshot controls determine when the screen is captured.
