How do I view my HTML webpage on my phone

user_10856995 0
Viewed 37391

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.

android css html javascript
8 Answers

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

user_96120210
user_121753030

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.

user_69015450

More controls device toolbarYou 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

user_121318490

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

Start the webpage with your IDE so it's exposed to a port on your computer. Look up the IP of your computer and make sure you are on the same network with your mobile device. Navigate in your browser to your PC's ip + port and you will see it.

user_36987620

Put your css styling inside the html markup and open it in your phone. It will work. Not sure if it will display your images though, but you can test the responsiveness of your website.

user_129501780

Download open in browser app from play store. Then go to your internal storage on your mobile device and open with: open in browser.

user_147496470
Related