drafty

How to review a web page on mobile

Quick answer

Open the page in your phone's browser and scroll through it as a user would — that's the most accurate test. For a quicker check from your desk, use Chrome DevTools device mode (F12 → device toolbar) to simulate common phone sizes. If you need someone else to review it with you, share a link they can open and comment on from their own phone without any install.

Step 1

Open it on a real phone

Type the URL into Safari (iPhone) or Chrome (Android) and scroll through every section. Tap every button, open every dropdown. Real-device testing catches font size, tap-target spacing, and rendering quirks that no simulator reproduces — especially on iOS Safari, which has its own WebKit quirks. If the site isn't live yet, most web hosts and staging services give you a public preview URL you can open directly.

Step 2

Simulate mobile in Chrome DevTools

On your laptop, open the page in Chrome and press F12 (or Cmd+Option+I on Mac). Click the device toolbar icon in the top-left of DevTools (or press Ctrl+Shift+M). Pick a preset like "iPhone 14 Pro" or "Galaxy S21" from the dropdown. This swaps the user agent and resizes the viewport so you see the mobile layout without picking up your phone. Useful for fast iteration during a build — less reliable than a real device for final sign-off.

Step 3

Screenshot and annotate from your phone

Take a screenshot on your phone (side button + volume up on iPhone; power + volume down on Android), then tap the preview that appears in the corner. Use the built-in markup tools — iOS Markup or Android's Photos editor — to circle the problem area, add an arrow, or type a note. Save it and send via iMessage, Slack, or email. The gotcha: annotations disappear into a chat thread, and there's no way to see all the feedback in one place or mark anything as resolved.

Step 4

Share a link your client reviews from their phone

If you're collecting feedback from a client who will view the page on their own phone, the screenshot method falls apart fast — you end up with a scattered thread of "see attached" messages and no anchor to the actual element. The cleaner path: push the page (or a screenshot of it) to a shared link, and let your client tap to open and leave a pinned comment on the exact spot. They don't need an account. You see every note in one thread and can reply or mark it done.

The faster way

If your client keeps sending you "see attached" screenshots from their phone with no context about what they're pointing at, Drafty fixes that loop. You push the page — or a screenshot of it — and share a link. They open it on their phone, tap the element that looks off, and leave a comment pinned to that exact spot. No account, no install. You see every note threaded in one place and can reply or resolve without leaving the tool.

Open a live demo

Questions

How do I check my website on mobile without a phone?
Use Chrome DevTools device mode: open DevTools (F12), click the device toolbar icon, and choose a mobile device from the dropdown. You'll see the page rendered at that phone's viewport width with the correct user agent. Safari on Mac has its own version under Develop → Enter Responsive Design Mode.
How do I review a website on an iPhone?
Open Safari on your iPhone, type the URL, and scroll through the page as a normal user would. Pay attention to font size, tap targets (buttons that are hard to tap), and anything that overflows the screen horizontally. For deeper debugging, you can connect your iPhone to a Mac and use Safari's remote Web Inspector (Safari → Develop → your device name).
Can I test mobile view in Chrome?
Yes. Open DevTools (F12 or Cmd+Option+I), click the device toolbar icon in the top-left corner of the DevTools panel, and pick any device from the dropdown. Chrome also lets you set a custom viewport width if your target device isn't in the list. Note that this simulates the viewport and user agent but not hardware-level rendering differences.
How do I send website feedback from my phone?
The simplest method: take a screenshot, use your phone's built-in markup tool to annotate it, and send it. The limitation is that annotations arrive as image attachments with no thread or resolution tracking. For structured feedback, tools that let you open a shared link and drop a pinned comment directly on the element keep the conversation anchored to the page rather than floating in a chat thread.
What is the best way to review a website on a phone?
Real-device testing in Safari (iPhone) or Chrome (Android) is the most accurate. Simulate mobile in Chrome DevTools for fast iteration during a build. For client review specifically, a shared comment link beats the screenshot-in-iMessage loop — it keeps every note pinned to the exact element and in one place.
How do I check if a website is mobile-friendly?
Open it on a real phone and check for horizontal scroll (the most common sign of a broken mobile layout), text that's too small to read without zooming, buttons that are too close together to tap accurately, and images that overflow the screen. Chrome DevTools device mode is the fastest way to run this check from your desk.

Keep exploring

Stop emailing files back and forth.

Share one link. They comment on the exact spot — no account, always the current version.