This Helphin guide will teach to How to preview mobile site for your localhost web projects. This is simple and easy method to test your mobile version.
At the present time, the Internet technology has become a necessary to everyone. You cannot easily leave. The web sites idea have spread around the world. It has become an identity card. Similarly, mobile Websites have become too important. When developers create a website, even also they create a mobile version.
Some beginners build a web projects desktop version and mobile version. But they don’t know about the testing method. So, here we are talking about the perfect solution for beginners. If you do not know how to preview your mobile version, then follow this guide to know about testing your web project.
First install the XAMPP server on Windows-based PC. Here the Tutor video.
Step 1: Create a Index.php or Index.html file inside of C://XAMPP/htdocs/[PROJECTFOLDERNAME] directory and write your own code.
Step 2: Check your output with your favorite browser.
Step 3: (If your PC don’t have an IP, then) Go to control panel and click Network and Sharing Center. Click local area connection.
Step 4: Click Properties button on local area connection status box.
Step 5: Double click Internet Protocol Version 4 (TCP/IPv4) option.
Step 6: You can see Internet Protocol Version 4 Properties box. Now choose “Use the following IP address” option. Set your local system IP address, subnet mask and default gateway.
Step 7: Now enable your mobile or tablet Wi-Fi. Go to your mobile browser and enter your local system IP address which is set before in your local system. (i.e. 192.168.1.254)
For example, we are creating the localhost project under demo folder inside of the htdocs directory. So we open a mobile browser and enter 192.168.1.254/demo into the address bar.
This is the best and simple way to check your web project into your mobile and tablet. Watch your website preview instantly on different resolutions.
Another way to preview your mobile website:
Above guide will show you to preview website on your real mobile and tablet devices. But this steps will show you to test your site without mobile or tablet. If you don’t have any local area connection or Wi-Fi connection then you don’t worry about that. We have an another way to test your mobile website that could really help you.
Opera Mobile Classic Emulator is the Best tool. It can help your need for testing your website with various resolutions. Now we can talk about this and learn about this.
Step 1: Open your browser and enter the below URL or Click Here. Download your Opera mobile emulator copy.
Step 2: Double click the setup from the download folder. Click the install button to start the process.
Step 3: When the installation process is complete, open the opera mobile classic emulator software. Now choose your interface language.
Step 4: In this windows, you can see a lot of mobile devices resolution variation. If you have no idea to what you do then choose a custom option on the left side of the list and pick up any resolution in right side of the window. Finally, click launch button.
Step 5: Here we are choosing HTC Evo 4G device that has 480X800 resolution.
Step 6: For the first time, we accept the terms of the software.
Step 7: Now you enter your localhost project URL in address bar. For example: localhost/demo and press enter.
Step 8: You will see your web project in a mobile version like this.
Step 9: This is another device and resolution. Here we are choosing Amazon Kindle Fire HD7 devices that have 800×1280 resolution. This opera mobile classic emulator is not only for resolution. You can also choose your pixel density. That show you a perfect output.
And the result of tablet version is here.
We hope this guide will help you to testing your mobile version site for your localhost web projects.