1438 sujets

Web Mobile et responsive web design

Bonjour,

Quelle est la meilleure façon de procéder pour visualiser l'affichage final d'une page web sur un smartphone ? Utiliser le mode 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 ?

Je parle quand on code pas quand on surfe sur le web.
Modifié par ObiJuanKenobi (14 Jan 2022 - 13:17)
Ca revient au même. Vaut mieux vraiment le tester sur smarphone. Un ordi ne simulera pas / pas bien le tactile
Justement non, cela ne revient pas du tout au même ! C'est pour cela que je pose la question. Je réalise en ce moment une page web dans laquelle plusieurs blocs se suivent et quand l'un d'eux atteint le bord droit de la fenêtre du navigateur, il passe à la ligne et ainsi de suite. Ainsi, pour un écran d'ordinateur de bureau, j'ai maximum 4 colonnes de blocs en fonction de la largeur de chaque bloc.

J'ai ensuite utilisé les media queries pour indiquer que quand la largeur de l'écran du media utilisé est maximum de 700 px, il doit afficher une seule colonne et tous les blocs descendent les uns sous les autres.

Quand je réduis la largeur de la fenêtre du navigateur, j'ai effectivement une seule colonne. Mais quand je passe par l'affichage smartphone de l'inspecteur des éléments du navigateur, il continue à m'afficher 4 colonnes de blocs comme pour un écran d'ordinateur de bureau.

De plus, je ne peux pas tester le résultat final sur un smartphone pour deux raisons. La première c'est que je n'en ai pas, seulement un mobile. La seconde parce que la page web que je réalise en ce moment n'est pas en ligne mais en local.
Bonjour,

pour passer sur l'affichage adaptatif avec Firefox, c'est Ctrl + Maj + M.
Sinon, tu as des tests en ligne, par exemple :
https://bluetree.ai/screenfly/
très complet en appareils de toutes sortes. Bien sûr, ça ne sera jamais comme un vrai mobile, mais c'est un bon début pour dégrossir. Si tu réduis la largeur de la fenêtre de ton navigateur à la souris, tu n'agis que sur une seule dimension, ce qui fausse un peu les mesures par rapport aux appareils du commerce qui ont tous une largeur et une hauteur qui leur sont propre. Avec le test en ligne cité plus haut ou avec Ctrl + Maj + M, ce n'est pas seulement la largeur qui est changée mais aussi la hauteur, pour chaque appareil choisi.

Un code nous aiderait à y voir plus clair.
Bonjour Bongota,

Merci pour le lien mais apparemment il ne teste que les sites en ligne.
Or, je travail actuellement en local et je n'ai pas encore d'hébergeur.
De plus, je ne possède pas de smartphone, seulement un mobile.

Mais voici mon code, peut être que tu sauras me dire s'il y a un problème.

Code HTML :


<!<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link href="css/styles.css" type="text/css" rel="stylesheet">
    <title>Test blocs</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>

Code CSS :


*{
	padding: 0;
	margin: 0;
}

body {
  background-color: #000;
  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;
    }
}

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

upload/1642175830-62242-ecran1.jpg

Voila ce que j'obtiens en passant par l'affichage smartphone de l'inspecteur des éléments :

upload/1642175874-62242-ecran2.jpg

Et voila le résultat final que je voudrais obtenir sur un écran de smartphone :

upload/1642175983-62242-ecran3.jpg

Je me demandais donc si l'affichage smartphone de l'inspecteur des éléments est fiable, auquel cas mon code est mauvais, ou bien s'il bug et que je peux me fier à la largeur de la fenêtre du navigateur.
Modifié par ObiJuanKenobi (14 Jan 2022 - 17:02)
J'ai trouvé la solution !
Il me manquait juste cette ligne de code dans le <head> du HTML :
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Maintenant, l'inspecteur des éléments du navigateur m'affiche une seule colonne quand je sélectionne un smartphone quelconque.

Je vais pouvoir avancer dans mon projet, merci pour vos interventions.
oh là !
Dans mon message, j'ai pensé à te rappeler cette fameuse balise, mais je me suis retenu, j'ai eu peur de te prendre pour un distrait Smiley lol
Il faut toujours penser au pire.
Bonne continuation.
ps: j'avais aussi oublié que tu n'étais pas en ligne Smiley confus