Adaptation pour mobile avec css@media

Version imprimable

27/10/2015, 21h07
LinTianFu

Adaptation pour mobile avec css@media

Bonjour,

Ayant finalisé mon site web, je m'aperçois que l'affichage est vilain depuis un IPhone ou un Android.
Le site passe très bien sur les pc, quelque soit l'OS et les navigateurs utilisés.

En parcourant des forums pour adapter mon site aux versions mobiles, j'ai appris l'existence d'une balise CSS @media est appelé Media Queries par le W3C.

Je ne suis pas un pro du développement web, et je souhaiterai un peu d'aide, si cela était possible.

De ce que j'ai compris, il faut ajouter un code dans le fichier HTML:

Code:

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

Ensuite, je bloque sur la création d'un fichier *.CSS dans lequel serait enregistré le nécessaire au bon affichage du site sur un téléphone.
Je ne comprends pas ce qu'il doit comporter, ni comment l'appeler depuis mon fichier HTML.
Toutes les pages du site doivent-elles contenir également cette balise META?
Et enfin, que doit contenir exactement le fichier CSS? Dois-je créer un nouveau CSS ou incorporer les informations dans le CSS existant?

Si un excellent tuto pour les nuls comme moi existait sur le sujet, je ne vous cache pas que cela m'enlèverait une sale épine du pied.

Merci pour vos commentaires et informations.
27/10/2015, 21h42
kOrt3x

Sinon avec BootStrap tu peux facilement faire une site mobile et desktop.
28/10/2015, 09h43
LinTianFu

Oui, merci pour ce conseil; Mais mon client n'appréciera pas que je reprenne tout le projet, cela risque fort d'en modifier le design, et le site est déjà en ligne...
Je recherche vraiment une solution viable avec une balise CSS @media.

Voici ce que j'ai trouvé comme informations, pouvez-vous m'indiquer si ce contenu est complet s'il vous plait?

Code à ajouter dans le HTML entre les balises "HEAD":
une balise "META" pour adapter l'affichage aux mobiles quels qu'ils soient.
Et une balise "LINK" pour appeler le CSS comportant les info de style.

Code:

1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK rel="stylesheet" type="text/css" href="NOM_DU_FICHIER.css">

Avec le contenu suivant dans le CSS:

Code:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
@media (max-width: 640px) {
	* {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	element1,
	element2 {
		float: none;
		width: auto;
	}
	
	/* masquer les éléments superflus */

	.hide_mobile {
		display: none !important;
	}
	
	/* Un message personnalisé */

	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}
}

	/* réduire de façon harmonieuse toutes les tailles de polices en orientation paysage
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}

Ai-je bien tout compris? Merci pour vos remarques et commentaires.