The interface display is incorrect

Question

Good afternoon/evening, I am currently creating a website and decided to test its adaptability. Everything looks fine on the computer:

But when I transfer it to my phone (Redmi Note 9 PRO and Samsung Galaxy J1), the following results appear:

For some reason, the mobile browser cannot see the imported styles and JS. I have a question: if I put it on hosting, will it be the same thing? Why can't I see the style on my phone?

If you need meta tags and file paths, then they are:

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="./img/favicon.svg" type="image/x-icon">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/icons/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/style.css">

I would appreciate an explanation as to why this is happening, thank you in advance

Answer 1

I guess you are opening the file directly, and you may need an http server like this: https://www.npmjs.com/package/http-server

You can have it listen on 0.0.0.0 and then you should be able to open it via your local IP.