Inspecteur des éléments dans le navigateur

Version imprimable

14/01/2022, 08h55
Obi Juan Kenobi

Inspecteur des éléments dans le navigateur

Bonjour,

Quelle est la meilleure façon de procéder pour visualiser l'affichage sur un smartphone ?
Utiliser le mode d'affichage "smartphone" de l'inspecteur des éléments du navigateur (touche F12) ou bien réduire au maximum la largeur de la fenêtre du navigateur ?
14/01/2022, 09h07
ProgElecT

Salut

Si j'ai bien compris, sous Firefox c'est: Shift + Ctrl + M
14/01/2022, 13h32
jreaux62
Bonjour,

Citation:

Envoyé par ProgElecT

sous Firefox c'est: Shift + Ctrl + M

Exact : "Vue adaptative"

On peut citer aussi :
- https://www.webmobilefirst.com/
Et bien d'autres, en cherchant un peu...
14/01/2022, 16h01
Obi Juan Kenobi

Merci jreaux62 mais ce n'est pas ce que je demande.
Je demande, quand on est en cours de développement, comment tester le résultat final.
Faut-il passer par le mode affiche smartphone de l'inspecteur des éléments du navigateur ou alors est-ce qu'on peut simuler l'affichage en réduisant au maximum la largeur de la fenêtre du navigateur.
14/01/2022, 16h04
jreaux62
Je sais lire, merci.
Inutile de recopier la même phrase...

Une autre réponse ?
- utiliser un smartphone :aie:
Citation:

Envoyé par Obi Juan Kenobi

Quelle est la meilleure façon ...
Utiliser le mode d'affichage "smartphone" de l'inspecteur des éléments du navigateur (touche F12)
ou bien réduire au maximum la largeur de la fenêtre du navigateur ?

Comme le 2 reviennent au même... il n'y a pas de "meilleur" :roll:

Le lien que j'ai fourni est une alternative, différente.

Si ce n'est toujours pas ça... soit plus PRÉCIS.
14/01/2022, 16h13
Obi Juan Kenobi

Je ne peux pas utiliser un smartphone pour deux raisons : la première parce que je n'en ai pas (juste un mobile), la seconde parce que la page web n'est pas en ligne, seulement en local.
14/01/2022, 16h17
jreaux62
Les solutions proposées fonctionnent AUSSI en local !
Puisqu'elles ne dépendent que du navigateur.

Voici d'autres solutions :
- Tester un site mobile ou responsive design sur PC, c’est facile !
14/01/2022, 16h35
Obi Juan Kenobi

Le lien que tu me donnes propose exactement ce que j'ai dit au début, à savoir passer par le mode affichage smartphone de l'inspecteur des éléments du navigateur.

Mon problème est le suivant. Je réalise en ce moment une page web où plusieurs blocs, de la largeur de l'écran d'un smartphone (430 px), se suivent côte à côte et quand l'un d'eux atteint le bord droit de la fenêtre du navigateur, il passe à la ligne et les autres se suivent ainsi de suite. Donc, pour un écran d'ordinateur de bureau, j'ai une disposition des blocs sur maximum 4 colonnes et pour un écran de smartphone j'ai une seule colonne.

J'ai indiqué dans la feuille de style CSS un media queries qui stipule qu'en cas d'utilisation d'un smartphone, tous les blocs passent sur une seule colonne.

Pour tester le résultat final, quand je réduis au maximum la largeur de la fenêtre du navigateur, tous les blocs s'empilent les uns sur les autres sur une seule colonne. Mais quand je regarde l'affichage smartphone de l'inspecteur des éléments du navigateur, il continue à m'afficher 4 colonnes.

Je me demande alors si c'est un bug de l'inspecteur des éléments ou si réduire la fenêtre du navigateur est suffisant pour tester.
14/01/2022, 16h45
jreaux62

Pour te répondre, il faudrait, au moins pouvoir tester.

Donc, que tu fournisses les codes (HTML, CSS) nécessaires et suffisants.
14/01/2022, 17h14
NoSmoking

Bonjour,

Citation:

Envoyé par Obi Juan Kenobi

J'ai indiqué dans la feuille de style CSS un media queries qui stipule qu'en cas d'utilisation d'un smartphone, tous les blocs passent sur une seule colonne.

• Supprime de ta page cette contrainte, c'est le plus souvent une mauvaise idée que de cibler un device particulier, les « media queries » sont capables de faire de l'excellent travail dans pratiquement tout les cas. On peut même dire que dans pas mal de cas les « media queries » ne sont pas indispensables.
Souvent pour tester un simple redimensionnement du navigateur est effectivement suffisant.

• Concernant les « simulateurs », ce ne sont que des « simulateurs » !
Ils reproduisent mal ou incomplètement les événements tactiles et le besoin des préfixes vendeurs sur les propriétés CSS, à utiliser donc avec parcimonie.

3 pièce(s) jointe(s)

Voici le code HTML :

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
<!<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link href="css/styles.css" type="text/css" rel="stylesheet">
    <title>Test blocs sur grille</title>
</head>
<body>
	<div class="conteneur">
		<figure>
			<h1>1</h1>
			<img src="https://assets.codepen.io/12005/windmill.jpg" />
		</figure>
		<figure>
			<h1>2</h1>
			<img src="https://assets.codepen.io/12005/suspension-bridge.jpg" />
		</figure>
		<figure>
			<h1>3</h1>
			<img src="https://assets.codepen.io/12005/sunset.jpg" />
		</figure>
		<figure>
			<h1>4</h1>
			<img src="https://assets.codepen.io/12005/snowy.jpg" />
		</figure>
		<figure>
			<h1>5</h1>
			<img src="https://assets.codepen.io/12005/bristol-balloons1.jpg" />
		</figure>
		<figure>
			<h1>6</h1>
			<img src="https://assets.codepen.io/12005/dog-balloon.jpg" />
		</figure>
		<figure>
			<h1>7</h1>
			<img src="https://assets.codepen.io/12005/abq-balloons.jpg" />
		</figure>
		<figure>
			<h1>8</h1>
			<img src="https://assets.codepen.io/12005/disney-balloon.jpg" />
		</figure>
		<figure>
			<h1>9</h1>
			<img src="https://assets.codepen.io/12005/bristol-harbor.jpg" />
		</figure>
		<figure>
			<h1>10</h1>
			<img src="https://assets.codepen.io/12005/bristol-balloons2.jpg" />
		</figure>
		<figure>
			<h1>11</h1>
			<img src="https://assets.codepen.io/12005/toronto.jpg" />
		</figure>
	</div>
</body>
</html>

Voici le 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
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
*{
	padding: 0;
	margin: 0;
}
 
body {
  background-color: #acbdc4;
  font-family: 'zilla_slabsemibold';
}
 
.conteneur {
  column-count: 4;
  column-gap: 10px;
}
 
h1{
	text-align: center;
	color: #fff;
	background-color: #396373;
	padding: 10px 0;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-size: 1.8em;
}
 
img {
  max-width: 100%;
  display: block;
}
 
figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
}
 
figure > img {
  grid-row: 1 / -1;
  grid-column: 1;
}
 
figure a {
  color: black;
  text-decoration: none;
}
 
 
 
/* ****************************************** */
/* ************* MEDIA QUERIES ************** */
/* ****************************************** */
 
@media only screen and (max-width: 1300px) {
	.conteneur {
    	column-count: 4;
    }
}
@media only screen and (max-width: 1000px) {
	.conteneur {
    	column-count: 3;
    }
}
@media only screen and (max-width: 700px) {
	.conteneur {
    	column-count: 1;
    }
}
 
 
 
/* ****************************************** */
/* ********** POLICE DE CARACTERE ********** */
/* ****************************************** */
 
@font-face {
    font-family: 'zilla_slabsemibold';
    src: url('../fonts/zillaslab-semibold-webfont.woff2') format('woff2'),
         url('../fonts/zillaslab-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Voilà ce que j'obtiens sur un écran d'ordinateur de bureau :

Pièce jointe 611830

Voilà ce que j'obtiens en utilisant l'affichage smartphone de l'inspecteur des éléments :

Pièce jointe 611831

Et voila ce que je voudrais voir sur un écran de smartphone (j'ai obtenu cet affichage en réduisant au maximum la largeur de la fenêtre du navigateur) :

Pièce jointe 611832

Je me demande donc si l'inspecteur des éléments bug ou bien est-ce que c'est mon code qui est mauvais.
Le résultat final que veut obtenir c'est que l'écran du smartphone n'affiche qu'une seule colonne et non 3 comme dans la seconde capture écran.

14/01/2022, 17h28
NoSmoking

Pas regardé en détail, juste l'entête, mais refait tes tests en mettant

Code:

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

dans la partie <head> de ton document.
14/01/2022, 17h34
Obi Juan Kenobi

YES !
Merci NoSmoking, ça marche maintenant.
Il me manquait effectivement cette balise <meta>

Merci sincèrement, je vais pouvoir avancer dans mon projet puisque tu m'as enlevé un caillou dans la chaussure.