Question de débutant html+css (chrome smartphone)
meepmeep
Messages postés
25
Date d'inscription
Statut
Membre
Dernière intervention
-
meepmeep Messages postés 25 Date d'inscription Statut Membre Dernière intervention -
meepmeep Messages postés 25 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai une question de débutant...
J'ai 2 pages html avec des liens pour passer d'une page à l'autre.
J'ai fait un fichier style.css commun aux 2 pages
ma page index.html :
ma page cdc.html (c'est la même chose qu'index avec "blabla" en plus et les liens qui changent...)
Ma feuille style.css
J'ai mis mes fichiers sur un FTP free.
- Si je consulte sur PC, tout va bien
- sur mon vieux navigateur android, tout va bien...
- Mais sur Chrome du smartphone, les caractères du fichier index apparaissent plus gros que sur la page cdc...
Et ça, juste car il y a un "blabla" en plus sur la page index !
Je ne comprends pas pourquoi il y a ce bug...
Est-ce que c'est par ce que mon texte dépasse une certaine largeur à l'écran ???
Si j'enlève des lignes test test test... ça diminue...
Merci d'avance si vous pouvez m'aider...
J'ai une question de débutant...
J'ai 2 pages html avec des liens pour passer d'une page à l'autre.
J'ai fait un fichier style.css commun aux 2 pages
ma page index.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>index.html</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>TITRE PRINCIPAL<br></h1>
<h2>SOUS-TITRE<br></h2>
- <a href="cdc.html" target="_top">test test test test test du blabla</a><br>
- blabla blabla blaabla blablla<br>
- test<br>
- test<br>
- test<br>
- test<br>
- test<br>
</body>
</html>
ma page cdc.html (c'est la même chose qu'index avec "blabla" en plus et les liens qui changent...)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>index.html</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>TITRE PRINCIPAL<br></h1>
<h2>SOUS-TITRE<br></h2>
- <a href="index.html" target="_top">test test test test test du </a><br>
- blabla blabla blaabla blablla<br>
- test<br>
- test<br>
- test<br>
- test<br>
- test<br>
</body>
</html>
Ma feuille style.css
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 34px;
}
h2 {
font-size: 38px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: #990000;
}
a {
text-decoration: none;
color: #000099;
font-size: 34px;
font-family: Arial,Helvetica,sans-serif;
}
h1 {
font-family: Arial,Helvetica,sans-serif;
font-size: 40px;
font-weight: bold;
color: #330000;
}
J'ai mis mes fichiers sur un FTP free.
- Si je consulte sur PC, tout va bien
- sur mon vieux navigateur android, tout va bien...
- Mais sur Chrome du smartphone, les caractères du fichier index apparaissent plus gros que sur la page cdc...
Et ça, juste car il y a un "blabla" en plus sur la page index !
Je ne comprends pas pourquoi il y a ce bug...
Est-ce que c'est par ce que mon texte dépasse une certaine largeur à l'écran ???
Si j'enlève des lignes test test test... ça diminue...
Merci d'avance si vous pouvez m'aider...
A voir également:
- Question de débutant html+css (chrome smartphone)
- Smartphone - Accueil - Protection
- Voici comment relier sans fil votre smartphone à votre PC pour transférer des photos (et bien plus encore) - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Google chrome - Télécharger - Navigateurs
- Editeur html - Télécharger - HTML
5 réponses
Bonjour,
Dans un premier temps il n'est pas nécessaire de mettre des balise <br> pour faire des saut de lignes, il est préférable d'utiliser la balise <ul> ou <ol> pour faire des listes
<ul> est une liste non-ordonné
<ol> est une liste ordonné donc numéroté de 1a X
Si tu veut mettre du texte en dessous utilise des balises <div> par exemple que tu pourra mettre les une en dessous des autres, tu pourra ensuite les personnaliser en CSS
Tu peut également mettre un ID à ta <div> pour pouvoir la personnaliser (Attention un ID doit être unique)
Exemple avec ton code :
Pour le css tu pourra personnaliser chaque div comme ceci
Si tu as d'autre question n’hésite pas
Dans un premier temps il n'est pas nécessaire de mettre des balise <br> pour faire des saut de lignes, il est préférable d'utiliser la balise <ul> ou <ol> pour faire des listes
<ul> est une liste non-ordonné
<ol> est une liste ordonné donc numéroté de 1a X
Si tu veut mettre du texte en dessous utilise des balises <div> par exemple que tu pourra mettre les une en dessous des autres, tu pourra ensuite les personnaliser en CSS
Tu peut également mettre un ID à ta <div> pour pouvoir la personnaliser (Attention un ID doit être unique)
Exemple avec ton code :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>index.html</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>TITRE PRINCIPAL<br></h1>
<h2>SOUS-TITRE<br></h2>
<div>
<a href="cdc.html" target="_top">test test test test test du blabla</a>
<div id="blabla">blabla blabla blaabla blablla</div>
<div id="test1">test</div>
<div id="test2">test</div>
<div id="test3">test</div>
<div id="test4">test</div>
<div id="test5">test</div>
</div>
</body>
</html>
Pour le css tu pourra personnaliser chaque div comme ceci
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 34px;
}
h2 {
font-size: 38px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: #990000;
}
a {
text-decoration: none;
color: #000099;
font-size: 34px;
font-family: Arial,Helvetica,sans-serif;
}
h1 {
font-family: Arial,Helvetica,sans-serif;
font-size: 40px;
font-weight: bold;
color: #330000;
}
#blabla{
font-size: 38px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: #990000;
}
#test1{
font-size: 38px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: #990000;
}
#test2{
font-size: 38px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: #990000;
}
#test3{
font-size: 38px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: #990000;
}
#test4{
font-size: 38px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: #990000;
}
#test5{
font-size: 38px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: #990000;
}
Si tu as d'autre question n’hésite pas
Bonjour,
Pour éviter que le mobile (ou le navigateur...) zoom automatiquement en fonction de la résolution du périphérique... interesse toi au viewport https://developer.mozilla.org/fr/docs/Mozilla/Mobile/Balise_meta_viewport
Et place, par exemple, dans ton head, la balise
Pour éviter que le mobile (ou le navigateur...) zoom automatiquement en fonction de la résolution du périphérique... interesse toi au viewport https://developer.mozilla.org/fr/docs/Mozilla/Mobile/Balise_meta_viewport
Et place, par exemple, dans ton head, la balise
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Salut,
Tu te serais bien un peu croisé les yeux, les deux codes HTML que tu donnes sont rigoureusement identiques.
Je ne suis pas spécialiste du smartphone, mais il me semble bien avoir vu, avec Chrome, la dimension des caractères s'ajuster en fonction de la longueur du texte à afficher.
Tiens un peu de lecture qui a peut-être à voir.
Article trouvé avec la recherche chrome smartphone ajustement taille caractères
Tu te serais bien un peu croisé les yeux, les deux codes HTML que tu donnes sont rigoureusement identiques.
Je ne suis pas spécialiste du smartphone, mais il me semble bien avoir vu, avec Chrome, la dimension des caractères s'ajuster en fonction de la longueur du texte à afficher.
Tiens un peu de lecture qui a peut-être à voir.
Article trouvé avec la recherche chrome smartphone ajustement taille caractères
Merci pour ces débuts de réponses !
@ jordane45 : ça m'intéresse bien, je viens d'essayer et effectivement, ça bloque bien la taille, je pense que c'est un bon point de départ.
Et idealement, je souhaiterai que les pages s'adaptent à une version mobile ou PC, mais ça sera pour après...
@telliak
Non, je ne me suis pas croisé les yeux, les 2 pages sont "presque" identiques... il ya un "blabla" dans index.html qui a pour cause de modifier la taille de l'affichage sur smartphone...
Mais en figeant le zoom, j'ai l'impression que ça marche bien
@ jordane45 : ça m'intéresse bien, je viens d'essayer et effectivement, ça bloque bien la taille, je pense que c'est un bon point de départ.
Et idealement, je souhaiterai que les pages s'adaptent à une version mobile ou PC, mais ça sera pour après...
@telliak
Non, je ne me suis pas croisé les yeux, les 2 pages sont "presque" identiques... il ya un "blabla" dans index.html qui a pour cause de modifier la taille de l'affichage sur smartphone...
Mais en figeant le zoom, j'ai l'impression que ça marche bien
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Et idealement, je souhaiterai que les pages s'adaptent à une version mobile ou PC, mais ça sera pour après...
C'est ce que l'on nomme le responsive.
Pour t'y aider il existe le framework css BOOTSTRAP.
c'est utilisé par de nombreux sites tel que twitter.
https://getbootstrap.com/
oui.
Ce sont des fichiers css et JS.
Il suffit de les placer dans le répertoire de ton site... puis de les inclure comme pour n'importes quels autres fichiers css / js .
Ensuite, il te faudra utiliser les CLASS du css pour que ça se fasse tout seul.
Dans le lien que je t'ai donné tu as toutes la documentation. et tu trouveras sans aucune difficulté, des tonnes d'exemples sur le net.
Par exemple :
https://www.w3schools.com/bootstrap4/
(tu peux même cliquer sur le bouton "Try it Yourself >>" pour voir ce que ça donne.
Ce sont des fichiers css et JS.
Il suffit de les placer dans le répertoire de ton site... puis de les inclure comme pour n'importes quels autres fichiers css / js .
Ensuite, il te faudra utiliser les CLASS du css pour que ça se fasse tout seul.
Dans le lien que je t'ai donné tu as toutes la documentation. et tu trouveras sans aucune difficulté, des tonnes d'exemples sur le net.
Par exemple :
https://www.w3schools.com/bootstrap4/
(tu peux même cliquer sur le bouton "Try it Yourself >>" pour voir ce que ça donne.
Je ne vois pas le rapport entre la question posée et ta réponse qui propose tout autre chose que ce qu'écrit meepmeep.
Par ailleurs, le cours sur ol et ul est succinct et la suggestion de div avec une palanquée de sélecteurs CSS est pour le moins farfelue.
Il faut savoir que les différents navigateurs réagissent différemment au code utiliser.
La méthode que je vous fait utiliser permet de s'adapter à tous les navigateurs.
C'est un problème de ce qu'on appelle la Responsive
D'autre part, ta méthode ne change rien au vécu de meepmeep (cf. réponse de jordane45).