L'affichage de l'interface est incorrect

Question

Bonsoir/soir, je crée actuellement un site internet et j'ai décidé de tester son adaptabilité. Tout semble bien sur l'ordinateur :

Mais lorsque je le transfère sur mon téléphone (Redmi Note 9 PRO et Samsung Galaxy J1), les résultats suivants apparaissent :

Pour une raison quelconque, le navigateur mobile ne peut pas voir les styles et JS importés. J'ai une question : si je le mets en hébergement, est-ce que ce sera la même chose ? Pourquoi ne puis-je pas voir le style sur mon téléphone ?

Si vous avez besoin de balises méta et de chemins de fichiers, alors ce sont :

    <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">

J'apprécierais une explication sur pourquoi cela se produit, merci d'avance

Answer 1

Je suppose que vous ouvrez le fichier directement et vous aurez peut-être besoin d'un serveur http comme celui-ci : https://www.npmjs.com/package/http-server

Vous pouvez le faire écouter sur 0.0.0.0 et vous devriez ensuite pouvoir l'ouvrir via votre IP locale.