Densité de pixels

**pierregrenoblois** · 17/09/2018, 18h08

Bonjour,

C'est une question idiote

, j'en suis désolé mais mes
compétences ne me permettent pas de trouver la réponse tout seul...
j'essaie de réaliser un site qui est organisé en 3 colonnes
de largeur variable.
Lorsque la largeur d'écran est inférieure à 570 px, mon site
ne comporte plus qu'une seule colonne.

Code CSS :

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

1
2
3
4
5
6
7
8
9
@media all and (max-width:569px)
{
   ...
}
 
@media all and (min-width:570px)
{
   ...
}

Jusque là, tout va bien...
Mais, bien des téléphones mobiles ont une excellente résolution
et ont plus de 570 px de large -> ils affichent donc les
3 colonnes ce que je ne souhaite pas car alors chaque colonne
mesure 1,5 cm de large !

Il faut donc tenir compte de la densité des pixels sur l'écran et
n'afficher qu'une seule colonne pour les petits (en cm) écrans
même s'ils comportent plus de 570 px de large.
Je ne sais pas faire.

Je précise que je suis débutant et que j'aimerais une explication
plus qu'un simple renvoi à une page de cours que je ne comprendrai pas

.

Si une page de cours complète votre explication alors je
prends bien sûr !

Un grand merci à tous et expliquez lentement
je comprends... pas tout

Pierrot

**NoSmoking** · 18/09/2018, 14h25

Bonjour,
il est vrai qu'il y a de quoi se perdre entre le viewport la device-width et la résolution physique.
• Voir : https://www.mydevice.io/#compare-devices

Avant de continuer, as-tu une balise meta viewport dans ta page entre tes balises <head> et </head>?

Code html :

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

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

**pierregrenoblois** · 19/09/2018, 16h40

Bonjour,

Merci pour ta réponse, je me suis contenté de faire
cette page : difficile de faire plus simple !

Code HTML :

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
<html>
<head>
 
<title>QUELLE RESOLUTION !</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">   
 
 
<LINK HREF="toto.css" REL="stylesheet" TYPE="text/css" />
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
$(document).ready( function()
{
 
}
 
); 
 
 
</script>
 
 
 
</head>
 
<body>
 
H E L L O   W O R L D  !
 
 
</body>
</html>

Mon but, faire varier la couleur du fond suivant la résolution de l'écran :

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
32
33
34
body 
{
   min-height: 100%;
   min-width:  100%;
 
   margin:  0;
   padding: 0;
 
   text-align: center;
   background: #aaaaaa;
}
 
 
 
 
 
@media (max-resolution:120dpi)
{
   body 
   {
      background: #ff0000;
   }
 
}
 
 
@media (min-resolution:121dpi)
{
   body 
   {
      background: #00ffff;
   }
 
}

La couleur de fond est bien celle attendue sur un PC car min-resolution est comprise.
Il n'en va pas de même sur un iPhone 6, qui ne peut exploiter ce paramètre, sur ce
mobile, la couleur de fond est celle proposée par défaut : #aaaaaa, car quelles que
soient les valeurs saisies pour la résolution aucun bloc @media {} ne fonctionne.

Je fais à coup sûr une erreur mais laquelle ?

Merci

PIERROT

**NoSmoking** · 20/09/2018, 16h42

Pourquoi faire le test en dpi unité qui me semble est plutôt réservée pour les @media print.

Essaies de faire des essais en testant avec des valeurs intermédiaires 96dpi, 100dpi ...

**pierregrenoblois** · 22/09/2018, 13h20

Bonjour,

Merci pour tes réponses.
J'ai fait différents tests avec toutes valeurs possibles
en dpi. S'il existe une autre unité reconnue sur tout PC, tablette,
android et iphone... je prends immédiatement.

j'ai regardé max/min-resolution sur caniuse.com.
Il semblerait que l'iphone ne connaisse pas ce paramètre, il lui préfère
le paramètre min/max-device-pixel-ratio (voir l'index 3 sur ce site).

Je ne vois pas bien comment résoudre ce problème assez commun en
utilisant min/max-device-pixel-ratio, paramètre qui ne me renseigne pas
sur ce que je souhaite absolument savoir : la taille en CM de l'écran
de l'internaute.

Merci

PIERROT

**NoSmoking** · 23/09/2018, 10h27

Je t'engage a regarder les solutions proposés sur ces pages

tu devrais y trouver ton bonheur

**pierregrenoblois** · 28/09/2018, 01h03

Bonjour et merci,

J'ai lu les lectures proposées et cela est intéressant.

Bien sûr je ne souhaite pas coder pour un device particulier mais créer un code plus général.

Je remercie tout le monde pour leur patience avec moi car j'ai une certaine tendance à m'embrouiller tout seul.
Pixels réels, pixels css et viewport…
J'avais vu et noté pas mal de choses sur le viewport, car j'ai toujours eu du mal avec cette notion.

Excusez-moi pour les répétitions par rapport aux messages précédents:

J'envoie le code, il s'agit d'afficher 3 divs horizontalement lorsque l'écran est plus grand que 570px et d'afficher verticalement ces mêmes trois divs lorsque l'écran est plus petit que 570px.
Tout va bien sur un PC, mais pas sur un mobile.

En prime une photo de l'écran de mon iPhone :
- à gauche, ce qui se passe
- à droite, ce que je souhaite et que je n'obtiens pas

Code HTML :

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
<html>
<head>
 
<title>H E I N ?</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
 
<LINK HREF="klubr2.css" REL="stylesheet" TYPE="text/css" />
 
<script type="text/javascript" src="jquery.js"></script>
</script>
 
</head>
<body>
 
<div id="fond">
 
<div id="div1">
<img src="images/photo1.png" id="image1" />
</div>
<div id="div2">
<img src="images/photo2.png" id="image2" />
</div>
<div id="div3">
<img src="images/photo3.png" id="image3" />
</div>
 
</div>
</body>
</html>

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
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
body 
{
min-height: 100%;
min-width: 100%;
 
margin: 0px;
padding: 0px;
 
text-align: center;
background: #0c0c0c;
}
 
 
 
#image1, #image2, #image3 { max-width:100%; } 
 
 
#fond 
{ 
position:relative; 
visibility:visible;
display:none; 
background: #0c0c0c;
 
padding: 0px; 
margin: 0px;
 
margin-left: auto;
margin-right:auto;
 
border:none;
}
 
 
#div1 
{ 
position:relative; 
visibility:visible; 
display:none; 
 
padding: 0px; 
margin: 0px;
 
border:none;
z-index: 10;
}
 
 
 
#div2 
{ 
position:relative; 
visibility:visible; 
display:none; 
 
padding: 0px; 
margin: 0px;
 
border:none;
z-index: 10;
}
 
 
 
#div3 
{ 
position:relative; 
visibility:visible; 
display:none; 
 
padding: 0px; 
margin: 0px;
 
border:none;
z-index: 10;
}
 
 
 
@media all and (min-width:570px)
{
 
#fond 
{
display:block;
top: 20px;
width: 94%;
}
 
 
#div1 
{
display:inline-block;
width: 30%;
}
 
 
#div2 
{
display:inline-block;
width: 30%;
}
 
 
#div3 
{
display:inline-block; 
width: 30%;
}
 
 
 
 
}
 
 
 
@media all and (max-width:569px)
{
 
#fond 
{
display:block;
top: 20px;
width: 94%;
}
 
 
#div1 
{
display:block;
width: 94%;
}
 
 
#div2 
{
display:block;
width: 94%;
}
 
 
#div3 
{
display:block; 
width: 94%;
}
 
 
 
}

Je n'y arrive pas après pas mal de tentatives, impossible d'avoir mes trois divs alignés horizontalement sur un mobile, (je ne m'occupe plus de la densité), je pense que ce sera limpide pour toi

Merci en tous cas

PIERRE GRENOBLOIS

**NoSmoking** · 29/09/2018, 19h58

Je viens de regarder rapidement tes codes !

Code HTML :
• Ton fichier devrait commencer par <!doctype HTML>.
• Une balise </script> qui traine.
• Trop d'IDs et des conteneurs pas forcément utiles, il te faut alléger la structure pour partir sur des bases saines, le CSS n'en sera que plus facile à gérer.

Code CSS :
• Serait à revoir après une construction plus épurée, pas mal de chose pouvant être simplifié.
• Pense à indenter ton code correctement cela rend l'analyse plus aisée.
• Regarde du côté du modèle de « boîte flexible » : display:flex.

**pierregrenoblois** · 03/10/2018, 04h41

Bonjour,
Merci pour tes réponses.

Je comprends un peu mieux mon iPhone :
nombre de pixels : 640 px
nombre de pixels css : 320 px
Viewport par défaut d'un navigateur safari mobile : 980px

Cependant, mon but ne sera jamais de développer pour un ou plusieurs mobiles spécifiques.
Tes suggestions sont bonnes j'ai donc pompé tes idées.

ça marche MAIS… je n'arrive jamais
à modifier la valeur du Viewport par défaut qui vaut 980px pour un safari mobile.
C'est comme si l'instruction <meta name="viewport" content=… n'était pas reconnue
par un iPhone ce qui est surprenant puisque cette instruction maintenant adoptée par tous
a été créée par Apple…
Qu'on lui affecte une valeur ou la valeur de device-width : ça ne change jamais rien, la comparaison
avec les valeur des blocs @media se fait toujours par rapport à 980px !
Tu me dis tout l'intérêt de l'instruction <meta name=… j'en suis tout à fait convaincu mais
cela ne fonctionne pas chez moi. Même remarque pour le zoom initial que je ne parviens
jamais à modifier...

code HTML :

Code HTML :

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
<html>
<head>
 
<title>H-E-I-N ?</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1">    
<LINK HREF="klubr2.css" REL="stylesheet" TYPE="text/css" />
 
</head>
<body>
 
<div id="mapage">
 
   <div>
      <img src="images/photo1.png" />
   </div>
   <div>
      <img src="images/photo2.png" />
   </div>
   <div>
      <img src="images/photo3.png" />
   </div>
 </div>
</body>
</html>

code CSS:

Code :

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
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
body 
{
   display:flex;
   flex-direction: row;
   justify-content:center;
   align-items:center;
 
 
   min-height: 100%;
   min-width:  100%;
 
   margin:  0px;
   padding: 0px;
 
 
   background: #0c0c0c;
}
 
 
 
img { max-width:100%;  }   
 
 
#mapage   
{  
   display:flex;
 
   width: 90%;
 
   margin-left:auto;
   margin-right:auto;
 
   background: #0c0c0c;
 
   border:none;
}
 
 
#mapage div
{  
   padding:  0px; 
   margin:   0px;
 
   border: 1px solid #000000;
}
 
 
@media screen and (min-width:981px)
{
 
   #mapage   
   {
      flex-direction: row;
      justify-content:center;
      align-items:center;
      background: #AA8888;
   }
 
}
 
 
 
@media screen and (max-width:980px)
{
 
   #mapage   
   {
      flex-direction: column;
      justify-content:center;
      align-items:center;
      background: #8888AA;
   }
 
}

Je ne peux me contenter d'un point de rupture à 980px (bcp trop grand et contraire au principe du viewport),
voilà pour le code, que j'ai simplifié, si tu comprends pourquoi je n'arrive pas à mettre en oeuvre
cette instruction, ce sera super.
Merci encore,

Pierre grenoblois