So if you find yourself sinking deeply into the comfort of a beanbag chair, or your device is far away on the kitchen table, or a coworker has rejected your pleas to borrow their lightning cable - here’s a quick tip:
Use the Xcode simulator to preview your responsive web content in iOS Safari.
- Open Xcode and from the Xcode menu and select: Open Developer Tool → Simulator.
- Use the command ⌘⇧H to toggle the simulator’s hardware home button.
- Open Safari from the dock
- Click in the address bar and select “Paste” (http://localhost:8888 if you’re using a stock Mamp setup. If your content is static, pasting a file:// link should work too, though I’m not sure I can condone that practice.)
By default, I use the iPhone 6 scaled to 50%, but If you’d like to try different devices:
- Select Hardware → Device → iOS from the top menu, and
select the device you’d like to use for testing.
- Open desktop Safari and select: Develop → Simulator → Your page URL
From there you can reload the page just like you would on a connected device.
Previewing web content in the Xcode simulator is a handy trick for testing your web projects when you dont want to, or can’t, directly connect to your phone. It’s also a great trick for recording video captures and screenshots for marketing collateral.