Discussion :

[Obi Juan Kenobi]

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 ?

[ProgElecT]

Salut

Si j'ai bien compris, sous Firefox c'est: Shift + Ctrl + M

[jreaux62]

Bonjour,

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...

[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.

[jreaux62]

Je sais lire, merci.
Inutile de recopier la même phrase...

Une autre réponse ?

• utiliser un smartphone

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"

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


Si ce n'est toujours pas ça... soit plus PRÉCIS.

[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.

[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 !

[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.

[jreaux62]

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

Donc, que tu fournisses les codes (HTML, CSS) nécessaires et suffisants.

[NoSmoking]

Bonjour,

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.

[Obi Juan Kenobi]

Voici le 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
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 :

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
*{
	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 :

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

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) :

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.

[NoSmoking]

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

Code html :

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

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

dans la partie <head> de ton document.

[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.