site stats
How to Preview mobile site for your localhost web projects?

How to preview mobile site for your localhost web projects?

How to preview mobile site for your localhost web projects?

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.

 How to test mobile version site for your localhost web projects?

Step 2: Check your output with your favorite browser.

 How to test mobile version site for your localhost web projects?

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.
 How to test mobile version site for your localhost web projects?

 

Step 4: Click Properties button on local area connection status box.

 How to test mobile version site for your localhost web projects?

Step 5: Double click Internet Protocol Version 4 (TCP/IPv4) option.

 How to test mobile version site for your localhost web projects?

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.

 How to test mobile version site for your localhost web projects?

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.

 How to test mobile version site for your localhost web projects?

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.

 How to test mobile version site for your localhost web projects?

Step 2: Double click the setup from the download folder. Click the install button to start the process.

 How to test mobile version site for your localhost web projects?

Step 3: When the installation process is complete, open the opera mobile classic emulator software. Now choose your interface language.

 How to test mobile version site for your localhost web projects?

 How to test mobile version site for your localhost web projects?

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.

 How to test mobile version site for your localhost web projects?

Step 5: Here we are choosing HTC Evo 4G device that has 480X800 resolution.

 How to test mobile version site for your localhost web projects?

Step 6: For the first time, we accept the terms of the software.

 How to test mobile version site for your localhost web projects?

Step 7: Now you enter your localhost project URL in address bar. For example: localhost/demo and press enter.

 How to test mobile version site for your localhost web projects?

Step 8: You will see your web project in a mobile version like this.

 How to test mobile version site for your localhost web projects?

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.

 How to test mobile version site for your localhost web projects?

And the result of tablet version is here.

 How to test mobile version site for your localhost web projects?

We hope this guide will help you to testing your mobile version site for your localhost web projects.

Leave a Reply

Close Menu