The captured webpage is different from a real phone

html.to.design simulates the capture of mobile phone viewport when using the viewport feature.

Sometimes it doesn’t render like on a real mobile phone because the websites are not responsive the viewport sizes but try to detect if the device is a mobile phone or not. For these sites, what you see in the browser and what is captured by html.to.design is different from what you would have in a real phone.

Most of these sites use the user-agent information to detect mobile device. You can change the user-agent of the browser to fix the problem.

How capture a mobile version of the website with a custom user-agent

1. Install the browser extension

Changing the user agent is only possible with captures from the browser extension. If you haven’t already, install it.

2. Follow the same steps as capturing a mobile version

Right-click the page and choose Inspect to open DevTools, then turn on Device Mode to set your own viewport dimensions, as described in Not capturing full page.

3. Change the user-agent

In DevTools, open the ︙ menu > More tools > Network conditions. It opens as a tab in the drawer at the bottom of DevTools.

Uncheck Use browser default and pick a phone in the list, for example Chrome — Android Mobile.

The webpage should be rendering like a real mobile phone. If it’s not the case, then change to another user-agent until you find a valid one.

4. Capture the page and bring it into Figma

Click Capture Full Page in the html.to.design extension, with the Browser viewport ticked, then copy the capture to Figma or send it to the plugin.