How to Screenshot a Mobile Web Page with the On-Screen Keyboard Open

To screenshot a mobile webpage with the on-screen keyboard visible, focus a field, wait for the keyboard and page layout to settle, then take a normal screenshot of the phone screen without dismissing the keyboard. On iPhone with Face ID, quickly press and release Side and Volume Up together. On iPhone with a Home button, quickly press and release Side and Home together. On Android, use the screenshot control documented for your phone model; button combinations vary by manufacturer.

1. Capture the visible screen on a phone

Open the webpage in the phone’s browser.
Tap the input, search field, or other editable area you want to show as focused.
Wait until the keyboard appears and the page has finished shifting or resizing.
Leave the keyboard open and take a standard device screenshot.
Open the saved image and check that both the intended page state and keyboard are visible. Repeat if the keyboard closed or the page moved during capture.

iPhone

Apple documents these shortcuts for a normal screenshot of what is on the iPhone screen:

iPhone with Face ID: quickly press and release the Side button and Volume Up button at the same time.
iPhone with a Home button: quickly press and release the Side button and Home button at the same time.

Keep the field focused and keyboard open while pressing the buttons. See Apple’s instructions for taking a screenshot on iPhone.

Android

First show the keyboard, then invoke the screenshot control for the specific phone. Android screenshot controls and hardware shortcuts can differ across manufacturers and models, so consult the phone maker’s instructions rather than relying on one button combination as universal. If the shortcut is difficult while the keyboard is open, use the device’s available screenshot control from its system interface, taking care not to close the keyboard first.

2. Choose a normal screenshot, not a full-page capture

A normal screenshot records the visible screen state, including the keyboard when it is open. Safari’s Full Page option is for webpage content extending beyond the visible screen and can save that longer page as an image or PDF. It is a different capture goal; Apple does not say that the software keyboard is included in a full-page webpage capture. If the keyboard itself must appear, use the ordinary screen screenshot. See Apple’s screenshot instructions.

3. For developers: reproduce and inspect the keyboard layout

Keyboard appearance can change the browser’s available viewport. Chrome for Developers describes three behaviors: the browser may resize the visual viewport, resize both the visual and layout viewports, or overlay the keyboard without resizing either. Which behavior occurs depends on the browser and operating-system combination.

Test the page on the target phone and browser when exact appearance matters.
Focus the same type of field a user will focus, since form-field behavior can affect layout.
Observe whether content scrolls, resizes, or sits behind the keyboard; capture only after the final state is stable.
For a bug report, include the device model, OS version, browser, focused field, and whether the keyboard overlays or resizes the page.

Safari Responsive Design Mode presets approximate devices. Apple notes that address bars, the on-screen keyboard, and device-specific form-field behavior can influence layout; it recommends Simulator for a more accurate preview. For a real user-facing image, capture directly on the target phone. For development, use device testing or Apple’s inspection tools as appropriate. Sources: Apple Responsive Design Mode and Chrome viewport resize behavior.

4. Or skip the browser setup

For a normal website screenshot, ScreenshotNeo provides a one-call API. This captures the webpage itself; it does not reproduce a phone’s live software keyboard. Use the device method above when the keyboard must be visible. The API accepts a URL and returns an image or PDF; 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.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await (await import('node:fs/promises')).writeFile('shot.webp', bytes);

ScreenshotNeo removes cookie and consent 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. Learn about ScreenshotNeo, then sign up for 1,000 free screenshots a month, no card required.

5. Troubleshooting

Problem	Likely cause	What to do
The screenshot has no keyboard	The keyboard was dismissed, or the page transition closed it before capture.	Refocus the field, wait for the keyboard, then take a standard screen screenshot.
The page content moved or is cut off	The browser resized a viewport or scrolled the focused field into view.	Wait for layout to settle; adjust scroll position while keeping the keyboard open, then capture again.
The Android shortcut does not work	The button sequence may differ on that manufacturer or model, or the timing was missed.	Check the maker’s instructions for the exact model and use its documented screenshot control.
A responsive preview does not match the phone	Emulation does not reproduce every address bar, keyboard, or form-field behavior.	Verify on the actual phone or use the appropriate simulator and inspection tools.
A full-page image omits the keyboard	Full-page capture targets page content beyond the visible viewport rather than the live screen state.	Take a normal device screenshot with the keyboard open.

6. Reliability and privacy notes

For an image that documents exactly what a user sees, capture on the actual device after the keyboard and layout settle. Emulators and browser previews are useful for debugging but can differ from the target combination. Before sharing a screenshot, inspect it for entered text, personal information, notifications, or other content visible on screen.

FAQ

Can I take a screenshot while typing?

Yes. Focus the field, leave the on-screen keyboard open, and invoke the phone’s normal screenshot function. The saved screen includes the keyboard if it remains visible at capture time.

Does an iPhone full-page Safari screenshot show the keyboard?

Apple documents Full Page for webpage content beyond the screen and does not specify that it includes the software keyboard. Use a normal screenshot when the keyboard must be shown.

Will a mobile screenshot API capture the phone keyboard?

A website screenshot API captures a rendered webpage, not the live system keyboard on your physical phone. Use the phone’s screenshot function for that exact state. ScreenshotNeo is useful for clean webpage captures where the keyboard is not part of the required image.