Adapter mon site à la version mobile

Version imprimable

01/02/2014, 23h14
houcem88

Adapter mon site à la version mobile

Bonjour,
Comment je fais pour rendre mon site adaptable pour les smart phone tel Iphone, ou les phone qui utilisent le systèmes android, ect...
Lorsque j'accède au site depuis mon mobile il me parait mal organiser
une solution SVP
MERci
02/02/2014, 06h31
Muchos

Bonjour houcem88 !

Votre inquiétude me touche ; et c'est le cœur en joie et la larme à l'œil que je viens vous rassurer… Oui, je le sens : vous êtes prêt à découvrir les fondamentaux du Responsive Web Design !

Une saine lecture, qui vous fera de nouveau aimer votre site… où il veut quand il veut :heart:

C'est le code source que j'ai trouver sur internet pour une page de style CSS pour adapter les ecrans
avec l'ajout d'une instruction dans le code HTML

Code:

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

Mais elle n'a pas marché cette méthode

Code 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
@media (max-width: 640px) {
 
 /* passer tous les éléments de largeur fixe en largeur automatique */
 body, element1, element2 {
   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 et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 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;
   color: #777;
   text-align: center;
   font-style: italic;
 }
}
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
}

02/02/2014, 17h52
Muchos

Je me suis trompé sur vous: vous êtes un padawan pressé :(
Dans ce cas, vous pouvez partir d'un template responsive (il y en a beaucoup!), que vous utilisiez ou non un CMS. Ils sont souvent bien conçus, et de plus en plus optimisés.
Néanmoins, si vous souhaitez comprendre ce que vous intégrez, je vous conseille à nouveau de lire le tuto.

Pour ma part, une fois les bases du responsive design comprises, j'ai réalisé ma CSS en me concentrant sur le mobile (approche mobile-first). Une fois terminé, j'ai travaillé sur des largeurs plus grandes, et j'ai constaté qu'il n'y avait pas grand chose à rajouter pour adapter mon site. Ça dépendra évidemment de chacun·e, mais ça peut être une bonne démarche pour vous.