I’ve recently been working on a number of projects that have required a separate mobile site or fully responsive build. During development I tend to lean on resizing the browser window to quickly layout at different breakpoints. For testing for the iPhone/iPad I also use the iOS simulator that comes with XCode.
Nothing beats testing on a range of devicesDespite the ease of using a simulator, nothing beats testing on (a range of) real devices so here is a quick guide for broadcasting your local site to any mobile device. The only caveat is that both your local computer and mobile device must be connected to the same wifi network. 1. Grab your IP Address An easy way to do this is visit System Preferences > Network.
Alternatively, via the command line you can get your ip details by running
ifconfig | grep inet
- Grab the port number that your local server is on I’m using MAMP Pro and it’s default is 8888 but in my case, it’s 80.
- Combine the two to get the URL to enter on your mobile device
http:// + ip + : + port</code></pre> for example:
- If you are using Wordpress, add a couple of things to your wp-config
<?php // Setup local host for viewing on other devices define('SITEURL', 'http://192.168.254.10:80'); define('WP_HOME', 'http://192.168.254.10:80'); ?>
- You’re all set 6. If it didn’t work In my case, the localhost was set up correctly but the document root was pointing to /Applications/MAMP/htdocs: To fix this, I set up a new host in MAMP Pro that pointed to my local directory. After that, you should be all good to go.
If you hate email but still want to keep in touch, follow me on Twitter.