View Mobile Version of Website with Custom User-Agent

Question

I'd like to be able to see what the mobile version of my site (or any site really) look like, without having to view it on an emulator (browserstack) or on my own devices.

I've researched and figured I could do this with Curl and custom User-Agent however it always ends up displaying the desktop version. I have tried the following user-agents:

User-Agent: Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.102011-10-16 20:23:10\r\n Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

Any assistance is appreciated.

Answer 1

There's support for emulating mobile browsers in the Chrome DevTools, see https://developer.chrome.com/devtools/docs/mobile-emulation. This is super convenient when you don't want to fire up a full emulator or a device. For iOS, you can use the iOS Simulator that comes with Xcode, you can start it and just drag URLs from your normal browser into the simulator.