CODEWITHSUNDEEP
javascriptandroidhtmlcss
JackU
JackU

Reputation: 1476

How do I view my HTML webpage on my phone

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.

Upvotes: 7

Views: 68019

Answers (8)

k1ngjulien
k1ngjulien

Reputation: 421

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.

Upvotes: 2

SaKSh
SaKSh

Reputation: 21

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.

Upvotes: 2

mariko
mariko

Reputation: 216

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

Upvotes: 2

Violan Naidoo
Violan Naidoo

Reputation: 1

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

Upvotes: 0

Mesta
Mesta

Reputation: 11

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.

Upvotes: 0

Taha Hamedani
Taha Hamedani

Reputation: 113

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.

Upvotes: 3

yigitusta
yigitusta

Reputation: 316

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

Upvotes: 18

Stefan
Stefan

Reputation: 2188

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.

Upvotes: 1

Related Questions