Faire un site pour PC et téléphone/tablette

**jlb59** · 06/07/2024, 18h35

Bonjour à tous,

Juste une petite question sur la possibilité de faire mon site accessible à la fois sur PC et sur un téléphone et/ou une tablette.

Je demande ça car mon site sur PC est presque impeccable, la mise en forme toutefois, mais lorsque je vais le voir sur mon téléphone, il faut presque des jumelles pour lire le tout, ça fait un peu comme une font de 5 ou 6 pixels.

J'ai essayé d'agrandir les caractères, mais c'est très moche sur le PC, par contre, c'est un peu plus lisible sur le téléphone.

Ma question est la suivante, dans un même site, est-ce qu'il y a la possibilité de faire ce qui est existant pour PC dans un répertoire ou autre ?
Un peu comme des site qui proposent plusieurs langues où toutes les pages sont traduites.

Comme il y a déjà un header (que j'ai appelé "entete_inc.php") qui contient le "<!DOCTYPE html>"et un "index.php' qui contient les variables nécessaires dans les fichiers qui seront inclus, comment ça va se passer ?

Merci d'avance de votre aide.

**thierrygz** · 06/07/2024, 18h52

Bonjour,

J'ai été confronté à cette situation délicate d'ergonomie. La solution est de créer un style, en fonction du type de support utilisé.
En CSS, cela débute par "@media".
Exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
@media only screen
and (min-width : 321px) {
	/* Styles */
	body {
		background-color: #fff;
	}
	div#conteneurHorizontal {
		width: 100%;
		margin: 0;
		display: flex;
	}

Cela aidera peut-être à t'orienter vers une solution.
Si tu as réussi tout le reste, tu peux peut-être m'aider pour le souci que je rencontre avec ma page de contact, stp ?

Merci

**laurentSc** · 07/07/2024, 12h26

thierrygz, je crois que ta réponse est une bonne solution : ça se résout en CSS en effet avec un style CSS différent selon la largeur de l'écran (min-width). Par contre, tu parles de t'aider sur ton formulaire de contact mais sans donner aucune information. Comme il s'agit d'une question qui n'a rien à voir, je t'invite à créer une nouvelle discussion.

**jlb59** · 07/07/2024, 17h16

Bonjour Laurent,

C'est vrai que la solution de Thierry est bonne, encore pour la mettre en application, c'est pas gagné.
Mais quand tu parles de plusieurs CSS, je voudrais avoir plus de détails ?

Je demande ça par que j'ai 3 CSS pour mon site , mais je ne vois pas ce que tu veux dire si je voudrais qu'il soit accessible sur téléphone ou tablette !

Concernant l'histoire du formulaire de contact, de Thierry, c'est pareil, je n'ai pas eu beaucoup de détails.

**laurentSc** · 07/07/2024, 17h36

Bonjour jlb59,
voici un exemple copié sur un de mes sites :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media screen and (max-width: 1600px) {
    fieldset {
      padding: 4rem;
    }
  }
  @media screen and (max-width: 1024px) {
    fieldset {
      padding: 3rem;
    }
  }
  @media screen and (max-width: 960px) {
    fieldset {
      padding: 2rem;
    }
  }
  @media screen and (max-width: 767px) {
    fieldset {
      padding: 1rem;
    }
  }

Dans cet exemple, on a 4 cas différents. Dans chaque cas, on applique un padding différent pour les éléments de type fieldset. Donc par exemple, si tu veux cibler les écrans type téléphone, c'est le dernier qui agira.

**jlb59** · 07/07/2024, 18h03

Un grand merci Laurent, mais tu avais parlé de plusieurs CSS, ça voudrait dire qu'il me faille en faire 12 puisque j'en ai déjà 3.
Donc, toujours en gardant ceux actuels, il me faudrait les copier 4x avec ce que tu m'as donné, mais avec un nom différent, par exemple :
Style.css (c'est le mien)
Styles1.css
Style2.css
...
Tout en gardant les paramètres existants, mais en rajoutant avant "body" ce que tu m'as donné ?

Ou alors, je mets tes 4 exemples dans un seul "style.css".
C'est clair pour toi, mais ça m'embrouille un peu !

**laurentSc** · 09/07/2024, 12h51

Envoyé par jlb59

Ou alors, je mets tes 4 exemples dans un seul "style.css".

Désolé, je croyais m'être abonné à la discussion mais si j'ai reçu un mail, pas vu...
Oui, faut modifier un seul fichier CSS.
Le mieux serait que tu fasses l'essai quand tu sais pas...

**domi65** · 10/07/2024, 17h00

Envoyé par jlb59

mais lorsque je vais le voir sur mon téléphone, il faut presque des jumelles pour lire le tout, ça fait un peu comme une font de 5 ou 6 pixels.

Cette déclaration dans le <head> de ton document devrait résoudre ce problème

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="width=device-width, initial-scale=1.0">

D'une manière générale un site, de nos jours, doit pouvoir s'adapter au média. Les media queries qu'on t'a citées plus haut sont le principal outil pour le réaliser. Cette adaptation porte le nom de "responsive design". Une recherche sur le web sur ce concept (ou encore "responsive CSS") te fera trouver toutes sortes de tutos là-dessus.

**jlb59** · 10/07/2024, 17h38

Merci, je vais voir ça !

**jlb59** · 17/07/2024, 19h50

Voilà la capture d'écran de mon téléphone en mettant la font à 24px.
C'est un peu plus lisible mais horrible sur le PC.
J'ai essayé tout ce qu'on m'a donné avec "@media..." mais il n'y avait aucun changement.

Je n'ai fait que cette page parce que les autre c'est tout petit.
Pièce jointe 657249

**laurentSc** · 20/07/2024, 22h08

Donne STP ton code CSS.

**jlb59** · 20/07/2024, 22h42

J'ai plusieurs CSS.
Lequel te semble important ?

**laurentSc** · 20/07/2024, 22h58

Si tu peux, donne tout ton code (CSS, html, autre type de fichier) et l'URL du site en ligne.

**jlb59** · 20/07/2024, 23h21

l'URL serait plus simple.
Et si tu veux plus de détails, je te les donnerai.
Https://qi98.legtux.org

**laurentSc** · 20/07/2024, 23h22

Je regarderai demain.

**jlb59** · 20/07/2024, 23h51

Tout comme moi et en plus, il est l'heure d'aller bientôt au pieu.

Comme entre temps, je bricole beaucoup, je suis un peu crevé.

A bientôt et bonne nuit.

**laurentSc** · 21/07/2024, 11h27

Bonjour,
pas besoin de détails.

En regardant le code source de ton site, j'ai vu que tu avais copié le code que je t'avais donné au post 5

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
 
	@media screen and (max-width: 1600px) {
    fieldset {
      padding: 4rem;
    }
  }
  @media screen and (max-width: 1024px) {
    fieldset {
      padding: 3rem;
    }
  }
  @media screen and (max-width: 960px) {
    fieldset {
      padding: 2rem;
    }
  }
  @media screen and (max-width: 800px) {
    fieldset {
      padding: 1rem;
    }
  }
/*
  @media screen and (max-width: 767px) {
    fieldset {
      padding: 1rem;
    }
  }
*/
 
</style>

Il s'agissait juste d'un exemple pour que tu t'en inspires, mais ce n'était pas censé être bon pour ton besoin...

En regardant ton site sur mon téléphone, l'affichage est correct mais ce n'est pas responsive.

J'ai aussi vu que tu as 4 fichiers CSS :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/pied_inc.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/menu_inc.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/tooltip.css" />

Vu les noms, styles.css s'applique probablement à tous les fichiers donc c'est dans celui-là qu'il faudra mettre le code CSS responsive.

Comme te le conseillait domi65 au post 8, fais une recherche sur google. Pour rendre ton site responsive, tu peux utiliser les mots clé "web responsive design" ou "menu hamburger" (c'est le nom des menus responsive) : https://www.codeur.com/tuto/bootstra...e-bootstrap-5/
https://www.codeur.com/tuto/css/menu-burger-html-css/
Un exemple de menu hamburger : https://codepen.io/laurentsch/pen/bGPpmOP

**laurentSc** · 21/07/2024, 12h03

https://www.codeur.com/blog/template...trap-gratuits/

Le framework CSS bootstrap est génial https://getbootstrap.com/docs/5.3/ donc je l'ajoute souvent dans mes mots clé de recherche.

**jlb59** · 21/07/2024, 12h50

Bonjour NoSmoking,

Tu sais, lorsque j'ai commencé QI98, je n'avais jamais entendu parler de Responsive ou Bootstrap.
Comme j'étais habitué à faire comme à mes début... et que ça marchait, j'ai pas poussé trop loin.

Il y a 1 mois ou 2, je n'avais même pas penser au format sur Smartphone ou Tablette.
C'est en regardant sur mon téléphone que j'ai vi qu'il y avait de gros soucis d'affichage.
Je me focalisait uniquement sur mon PC pour que ça soit clair.

Maintenant quand tu parles de Responsive et Bootstrap, pour moi c'est une autre pair de manche.
Ca voudrait dire que je dois tout reprendre depuis le début ?

J'ai regardé certains exemples et tutos, mais je n'y ai pas compris grand chose parce qu'il y a des noms inconnus au bataillon pour moi.
Il faudrait que je fasse 1 page pour comprendre.
A l'origine, j'ai voulu faire pour un bien en étant le plus simple possible.

Code Index :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php /* index.php */
 
/* On détermine quelle page est appelée */
$page = (isset($_GET['page'])) ? $_GET['page'] : 'accueil';
 
/* on crée du contenu */
$aContenu = array(
    'accueil' => "Bienvenue chez QI98.",
    'apropos' => "En savoir plus sur QI98.",
    'faq' => "Questions fréquemment posées.",
    'sitemap' => "Sachez localiser l'endroit où vous êtes.",
    'contact1' => "Contactez-moi",
    'contact-1' => "Vérification du contact",
    'contact' => "Contactez-moi",
    'contact-ctrl' => "Vérification du contact",
	'mentions' => "Mentions légales",
	'sitemap' => "Plan du site",
(...)
/* On initialise les variables nécessaires dans les fichiers qui seront inclus */
switch ($page)
{
/* Pour les pages standard */    
	case 'accueil':
        $title = "QI98 - Accueil";
        $titrePage = "Bienvenue chez nous";
		$url_page="pages/accueil/accueil.php";
		break;
    case 'apropos':
        $title = "QI98 - À propos";
        $titrePage = "À propos de nous";
		$url_page="pages/apropos/apropos.php";
        break;
    case 'faq':
        $title = "QI98 - Foire Aux Questions";
        $titrePage = "Foire Aux Questions";
		$url_page="pages/faq/faq.php";
        break;
    case 'sitemap':
        $title = "QI98 - Plan du site";
        $titrePage = "Sitemap";
		$url_page="pages/sitemap/sitemap.php";
        break;
(...)

Code Header :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php // entete_inc.php  ?>
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
	<meta name="language" content="FR">
        <meta name="identifier-url" content="https://qi98.legtux.org/" />
	<meta name="title" content="QI98 - Analyse de la mémoire" />
...
	<meta name="robots" content="All" />
		<title><?= $title ?></title> 
			<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="styles/pied_inc.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="styles/menu_inc.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="styles/tooltip.css"  media="screen" />
</head>
<body>

Code Css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*#### global #### */
html{
	font-family:"roboto",verdana,arial;
	font-size: 16px;
/*	background : LightSkyBlue;*/
background: rgb(111,103,240);
background: linear-gradient(90deg, rgba(111,103,240,1) 0%, rgba(170,182,247,1) 0%, rgba(170,182,255,1) 100%, rgba(101,124,252,1) 100%);
}
	@media screen and (max-width: 1600px) {
    fieldset {
      padding: 4rem;
    }
  }
  @media screen and (max-width: 1024px) {
    fieldset {
      padding: 3rem;
    }
  }
  @media screen and (max-width: 960px) {
    fieldset {
      padding: 2rem;
    }
  }
  @media screen and (max-width: 800px) {
    fieldset {
      padding: 1rem;
    }
  }
body {
	background:#000;

Code Footer :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
(...)
		</nav>
	</footer>
 
  </body>
</html>

Voilà, j'ai voulu faire au plus simple, et c'est pas gagné parce que tu m'as beaucoup aidé, ce dont je te remercie.

**laurentSc** · 21/07/2024, 13h17

No smoking, c’est pas moi !
Pas chez moi et pas mes lunettes de vue…
Je pourrai te répondre ce soir.

Faire un site pour PC et téléphone/tablette

CSS

Discussions similaires

Partager

Partager