How do I view my HTML webpage on my phone

Question

I have create a HTML webpage which also uses CSS and JS. When I view this on my PC it works and looks how it should.

What is the best way to put this on my phone? I tried to put all the relevant files onto my phone but it will only load the base HTML, all the files were in the same folder as the HTML code only references the name of the CSS and JS as they are in the same file on the PC.

I am referencing the CCS as: <link href="style.css" rel="stylesheet" type="text/css"/> and the script as <script type="text/javascript" src="script.js">

I am opening the HTML on my PC with Google Chrome and trying to view it on my phone with google chrome as well. I have an android phone.

Thanks in advance.

Solution 1

You can use a local server to host the webpage, and navigate to the private IP of your pc from your mobile device if they are connected to the same network.

I prefer live-server npm package for this. Simply type npm install -g live-server. Navigate to the directory your website is located at then run live-server. It will also show the port you are running on.

To find out your private ip address, open another command line and type ifconfig (or ipconfigif you are on windows).

Navigate to ip-address:port-number in your mobile device and you will see your website. Example private ip address and port number: 192.168.1.40:8080

Solution 2

The easiest way for previewing on the mobile device is using websites such as : https://search.google.com/test/mobile-friendly? I hope this helps you to determine your problem.

Solution 3

Try following steps:

1. Make sure your pc and mobile are connected to the same network.
2. In Vscode install live server extension. After installation, it will appear on the status bar as Go Live.
3. Run the extension. You can then see the site running on a port_number(like: 3000).
4. Now type in cmd(windows): ipconfig.
5. From there copy the Address IPv4.
6. Then go to your mobile and type like this Adress IPv4:port_number you will see your site running on mobile.

Solution 4

If you just want to test your website on a phone you can connect you phone via USB and connect your chrome desktop with chrome mobile.

Here is the guide from Google:

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

This should allow you to open and edit the site on your computer and view it on your phone to see if it works. You also get to use the desktop devtools while viewing the page on your phone.

For a permanent solution you can host your site on a webserver and connect to it over the internet.

Solution 5

You can view the mobile version on your pc. To do that,

1. open the website you want to view
2. press ctrl + shift + I(This opens the Inspector)
3. press ctrl + shift + M(Toggles the device toolbar)

You can even view the screen in different screen sizes

View more solutions

Comments

[JackU]

Brilliant thanks for you help. Struggled to start with as I didn't have nodejs installed but works now!

[Anton Rusak]

This answer doesn't help a lot. The man already knows how to open the page. He has issues with loading its resources.

[klediooo]

Please read the article of SO how to answer: stackoverflow.com/help/how-to-answer

[Admin]

The resources from css and images will load when you the open in browser app