Viewing Localhost Site On A Mobile Device
In modern web development it's very important that your website is functional on mobile devices. There are a few options that you can use when testing how your website works on mobile devices.
- Manually resize the browser
- Use a mobile device emulator
- Use a responsive tester tool
- Upload to a server and test on the mobile device
The best solution that you have would be to try the website directly on the mobile device so you can not only see how the website looks but how it feels to interact with, i.e looking at how easy it is to click links on the site.
When you are developing you don't want to be making changes then uploading to a server so you can view it on a mobile device. In this tutorial we are going to look at how you can view a localhost website on your mobile.
In the following I'm going to assume that you are using Ubuntu but you can use the same approach on other operating systems.
To view your localhost on your mobile device all you have to do is navigate to the IP address of the development machine.
To find the IP address in Ubuntu open the terminal and type ifconfig, search for inet addr this value is your IP address, now navigate to this on your mobile device.
You should then see the default localhost file if still located in /var/www/ on your development machine.
But most likely you have your development websites in folders within the /var/www so you would want to set an alias for the website you want to view on your mobile device at http://192.0.0.1/test-website.
On the command line open the /etc/apache2/sites-available/000-default.conf file and enter the following in the virtualhost.
Alias /test-website /path/to/website/root <Directory /path/to/website/root> AllowOverride All Options All </Directory>
Navigate to http://192.0.0.1/test-website on your mobile device and you will been able to view your development website.
Fastest WordPress Hosting With WPEngine
Stunning speed, powerful security, and best-in-class customer service. At WP Engine.
- Access 100s of premium tutorials and downloadable content
- Members content consists of premium WordPress plugins
- CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
- In-depth development tutorials
- Priority tutorial requests
- No ads
- First month free!