4
votes

Comment afficher ma page Web HTML sur mon téléphone

J'ai créé une page Web HTML qui utilise également CSS et JS. Lorsque je regarde ceci sur mon PC, cela fonctionne et ressemble à ce qu'il devrait.

Quelle est la meilleure façon de mettre cela sur mon téléphone? J'ai essayé de mettre tous les fichiers pertinents sur mon téléphone mais cela ne chargera que le HTML de base, tous les fichiers étaient dans le même dossier car le code HTML ne fait référence qu'au nom du CSS et du JS car ils sont dans le même fichier sur le PC.

Je fais référence au CCS comme suit: et le script comme

J'ouvre le code HTML sur mon PC avec Google Chrome et j'essaye également de l'afficher sur mon téléphone avec Google Chrome. J'ai un téléphone Android.

Merci d'avance.


3 commentaires

Faites-vous référence aux fichiers relativement (par exemple /css/theme.css au lieu de C: \ Users \ JackU \ project \ css \ theme.css )?


De plus, avec quoi ouvrez-vous le fichier html?


@JakeSteam Je fais référence aux fichiers comme étant simplement scr = "script.js" et href = "style.css" . Je l'ouvre sur mon PC avec chrome et sur mon téléphone avec chrome aussi. Je mettrai à jour ma question


7 Réponses :


1
votes

Démarrez la page Web avec votre IDE afin qu'elle soit exposée à un port de votre ordinateur. Recherchez l'adresse IP de votre ordinateur et assurez-vous que vous êtes sur le même réseau que votre appareil mobile. Naviguez dans votre navigateur jusqu'au port ip + de votre PC et vous le verrez.


0 commentaires

6
votes

Vous pouvez utiliser un serveur local pour héberger la page Web et accéder à l'adresse IP privée de votre ordinateur à partir de votre appareil mobile s'ils sont connectés au même réseau.

Je préfère le package live-server npm pour cela. Tapez simplement npm install -g live-server . Accédez au répertoire dans lequel se trouve votre site Web, puis exécutez live-server . Il affichera également le port sur lequel vous utilisez.

Pour connaître votre adresse IP privée, ouvrez une autre ligne de commande et tapez ifconfig (ou ipconfig si vous êtes sous Windows).

Accédez à l'adresse IP: numéro de port de votre appareil mobile et vous verrez votre site Web. Exemple d'adresse IP privée et de numéro de port: 192.168.1.40:8080


1 commentaires

Brillant merci pour votre aide. J'ai eu du mal au départ car je n'avais pas installé nodejs mais fonctionne maintenant!



1
votes

Si vous souhaitez simplement tester votre site Web sur un téléphone, vous pouvez connecter votre téléphone via USB et connecter votre bureau Chrome à Chrome Mobile.

Voici le guide de Google:

https://developers.google.com/web/ tools / chrome-devtools / remote-debugging /

Cela devrait vous permettre d'ouvrir et de modifier le site sur votre ordinateur et de l'afficher sur votre téléphone pour voir s'il fonctionne.

Pour une solution permanente, vous pouvez héberger votre site sur un serveur Web et vous y connecter via Internet.


0 commentaires

3
votes

Le moyen le plus simple de prévisualiser sur l'appareil mobile consiste à utiliser des sites Web tels que: https://search.google.com/test/mobile-friendly ? J'espère que cela vous aidera à déterminer votre problème.


0 commentaires

0
votes

Mettez votre style CSS dans le balisage html et ouvrez-le dans votre téléphone. Ça va marcher. Je ne sais pas s'il affichera vos images, mais vous pouvez tester la réactivité de votre site Web.


0 commentaires

-3
votes

Tout d'abord, incluez cette balise au-dessus de votre titre Ensuite, deux choses importantes sont, S'il existe un identifiant CSS dans votre code HTML dans un fichier séparé, incluez-le dans le fichier HTML lui-même en utilisant la balise et il en va de même avec Java Script, incluez ce code dans les balises elles-mêmes. Une autre chose que je veux souligner est que si votre page Web se compose d'images qui sont localement sur votre PC, ces images ne seront pas affichées sur votre mobile. Alors, utilisez toutes les images de Google et associez-les. J'espère que c'est clair :)


0 commentaires

0
votes

Téléchargement ouvert dans l'application du navigateur depuis le Play Store. Accédez ensuite à votre mémoire interne sur votre appareil mobile et ouvrez avec: ouvrir dans le navigateur.


3 commentaires

Cette réponse n'aide pas beaucoup. L'homme sait déjà comment ouvrir la page. Il a des problèmes avec le chargement de ses ressources.


Veuillez lire l'article de SO comment répondre: stackoverflow.com/help/how-to-answer


Les ressources du css et des images se chargeront lorsque vous ouvrirez l'application dans le navigateur