Effets responsifs et densité de pixels

**mathieu** · 15/08/2022, 13h00

j'ai du mal à travailler avec des effets responsifs en fonction de la densité de pixels donc peut-être que je n'ai pas compris comment fonctionne la base.

si on part d'une page vierge qui affiche un texte qui tient environ sur 10 cm sur l'écran d'un pc donc une densité de pixels de 1.
c'est un texte avec la taille par défaut sans aucune règle css. alors, sur un mobile qui a une densité de pixels de 2, ce texte s'affichera sur 5 cm de long. c'est ce que j'ai constaté et je voulais déjà être sur que c'est uniquement la densité de pixels qui produit cette différence d'affichage ?

**mathieu** · 21/08/2022, 15h49

la suite de ma question est de savoir quels outils vous me conseillez pour vérifier l'affichage sur des mobiles ?

quand j'essaye avec firefox, le changement de la densité ne produit aucun effet ni sur l'affichage, ni sur la règle css "resolution". et avec chromium, le changement de densité ne change rien à l'affichage mais change la règle css "resolution". et encore pire avec chromium, le changement de résolution produit un effet de zoom incompréhensible.

voilà le code de la page que j'ai utilisé pour faire mes tests

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
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
<html>
<head>
	<title>test densité</title>
	<style>
                
                @media (max-resolution : 0.9dppx)
                {
                        .densite_09 .superieure
                        {
                                display : none;
                        }
                }
                
                @media (min-resolution : 0.9dppx)
                {
                        .densite_09 .inferieure
                        {
                                display : none;
                        }
                }
                
                                
                                        
                @media (max-resolution : 1.6dppx)
                {
                        .densite_16 .superieure
                        {
                                display : none;
                        }
                }
                
                @media (min-resolution : 1.6dppx)
                {
                        .densite_16 .inferieure
                        {
                                display : none;
                        }
                }
                
                                
                                        
                @media (max-resolution : 2.5dppx)
                {
                        .densite_25 .superieure
                        {
                                display : none;
                        }
                }
                
                @media (min-resolution : 2.5dppx)
                {
                        .densite_25 .inferieure
                        {
                                display : none;
                        }
                }
                
                                
                                        
                @media (max-resolution : 3.5dppx)
                {
                        .densite_35 .superieure
                        {
                                display : none;
                        }
                }
                
                @media (min-resolution : 3.5dppx)
                {
                        .densite_35 .inferieure
                        {
                                display : none;
                        }
                }
                
                
                  .inferieure
                , .superieure
                {
                        padding : 0.4em;
                }
                
                .superieure
                {
                        background : #000;
                        color : #FFF;
                }
                
        </style>
</head>
<body>
 
 
	<div class="densite_09">
		<div class="inferieure">
			densité de pixels inférieure à 0.9
		</div>
		<div class="superieure">
			densité de pixels supérieure à 0.9
		</div>
	</div>
 
 
	<div class="densite_16">
		<div class="inferieure">
			densité de pixels inférieure à 1.6
		</div>
		<div class="superieure">
			densité de pixels supérieure à 1.6
		</div>
	</div>
 
 
	<div class="densite_25">
		<div class="inferieure">
			densité de pixels inférieure à 2.5
		</div>
		<div class="superieure">
			densité de pixels supérieure à 2.5
		</div>
	</div>
 
 
	<div class="densite_35">
		<div class="inferieure">
			densité de pixels inférieure à 3.5
		</div>
		<div class="superieure">
			densité de pixels supérieure à 3.5
		</div>
	</div>
 
 
</body>
</html>

**NoSmoking** · 01/09/2022, 09h05

Bonjour,
Attention toutefois la « surface CSS » n'est pas forcément la même que la « surface physique ».

Il y aurait lieu de rajouter la balise meta suivante

Code html :

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

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

Il existe cet outil, entre autres, Mydevice.io qui pourrait t'aider.

**mathieu** · 01/09/2022, 14h49

super, merci NoSmoking, c'est ce qu'il me manquait. avec cela la taille des textes est beaucoup plus logique ... dans ma logique

et au passage, je pense aussi avoir compris les attributs "srcset" générés par wordpress pour les images.

il me reste encore quelques détails à revoir pour être sûr d'avoir tout compris mais ça sera pour plus tard quand j'aurai fini de digérer cela.

Effets responsifs et densité de pixels

CSS

Vue hybride

Discussions similaires

Partager

Partager