Sujet Précédent Sujet Suivant

Question de débutant html+css (chrome smartphone)

Fermé
meepmeep Messages postés 26 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 2 septembre 2023 - 1 juin 2018 à 21:44
meepmeep Messages postés 26 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 2 septembre 2023 - 3 juin 2018 à 09:24
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 : 
<!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:

5 réponses

Réponse 1 / 5
Incorporated Messages postés 559 Date d'inscription jeudi 31 mai 2018 Statut Membre Dernière intervention 28 août 2018 370
1 juin 2018 à 22:00
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 : 

<!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
0
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
Modifié le 1 juin 2018 à 22:12
Salut,
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.
0
meepmeep Messages postés 26 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 2 septembre 2023 2
1 juin 2018 à 22:08
Merci pour ces précisions en css, je vais les mettre en oeuvre, mais ça ne resoud pas mon problème de "bug" d'affichage sur chrome smartphone...
0
Incorporated Messages postés 559 Date d'inscription jeudi 31 mai 2018 Statut Membre Dernière intervention 28 août 2018 370
1 juin 2018 à 22:09
Oui désolé je me suis un peu égarer sur l'origine de la question ;)

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
0
Incorporated Messages postés 559 Date d'inscription jeudi 31 mai 2018 Statut Membre Dernière intervention 28 août 2018 370
1 juin 2018 à 22:19
Et bien Telliak, si tu est plus apte à répondre à ce topic plutôt que moi, fait le donc au lieu de vouloir démonter les personnes qui essai d'aider.
0
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
Modifié le 1 juin 2018 à 22:25
C'est exactement ce que je viens de faire :-), j'avais voulu parer au plus pressé, pour éviter à meepmeep de partir dans une salade.
D'autre part, ta méthode ne change rien au vécu de meepmeep (cf. réponse de jordane45).
0
Réponse 2 / 5
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
1 juin 2018 à 22:15
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 
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

0
Réponse 3 / 5
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
1 juin 2018 à 22:18
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
0
Réponse 4 / 5
meepmeep Messages postés 26 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 2 septembre 2023 2
1 juin 2018 à 22:22
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
0
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
1 juin 2018 à 22:29
Ah, sont-ce mes vieux yeux qui faiblissent : 
- <a href="cdc.html" target="_top">test test test test test du blabla</a><br>
- blabla blabla blaabla blablla<br>
- test<br>

- <a href="index.html" target="_top">test test test test test du </a><br>
- blabla blabla blaabla blablla<br>
- test<br>

:-))
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
1 juin 2018 à 23:04

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/
0
meepmeep Messages postés 26 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 2 septembre 2023 2
1 juin 2018 à 23:07
Yes, mais ça, c'est le cran au dessus !
Il va falloir que j'y aille progressivement car je suis débutant...
C'est quoi le principe de Bootstrap, c'est à mettre sur le FTP ?
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
1 juin 2018 à 23:13
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.
0
meepmeep Messages postés 26 Date d'inscription mercredi 13 octobre 2004 Statut Membre Dernière intervention 2 septembre 2023 2
3 juin 2018 à 09:24
Super, merci beaucoup, ça va être la prochaine étape lorsque mon petit site sera prêt... c'est à dire dans quelques semaines quand même, car je viens seulement de commencer le contenu...
Merci bien !
0

Discussions similaires

Où trouver le dossier des favoris de Chrome ?
Fefewil -
sephi -

4 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse