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.

Answer 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

Answer 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.

Answer 3

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

Answer 4

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.