How to make a mobile website?

Question

I am writing a website on VScode and it is going very well, I now would like to see what it looks like on mobile so I can change that later, how do I do so?

Answer 1

Copy and paste your project folder into your phone and access the html file via some file explorer app? You can also opt to place your codes in Code Playground. We have a web IDE which allows you to save your codes which you can then access via the mobile app.

Answer 2

Just use Chrome's device emulator.

Open your website in Chrome > Go to the menu > More tools > Developer tools > Activate device mode > Choose a device viewport (mobile, tablet, desktop, etc)

Ref 1:
https://developers.google.com/web/tools/chrome-devtools/device-mode/

Ref 2:
https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

Answer 3

I use an app called Quoda, it is a good HTML editor and allows local files. there's many other apps like it but that's the one I use.

if you copy the files to your phone, you could copy the files full path then copy and paste it into the chrome app

If you're just looking for responsive design, you can simple change the width of your browser window on your PC, maybe set a code to display the viewports width on resize

Answer 4

Use live-server npm package.
https://www.npmjs.com/package/live-server
Please note that you would need Node.js to install beforehand in order to get npm package install and run.

Once live-server installed, run live-server to get hot reload of index.html in current working folder run on pc default browser.

Connect your phone to the same network with the working pc, open mobile browser with the working pc ip address and live server port number, you would get your current testing index.html live reload on the mobile browser.

Answer 5

Kyle I guess it means that the images are local to your device and only you can view them. If you plan on publishing, this is a good guide to get your assets online.

https://www.sololearn.com/Discuss/1054246/?ref=app

Answer 6

pao, thank you! it worked!

Answer 7

Thanks ill find an app to do it! i cant do it on code playground because i have lots of images that cant be accessed