IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Inspecteur des éléments dans le navigateur


Sujet :

CSS

  1. #1
    Membre à l'essai
    Homme Profil pro
    Infographiste
    Inscrit en
    janvier 2017
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Infographiste
    Secteur : Arts - Culture

    Informations forums :
    Inscription : janvier 2017
    Messages : 42
    Points : 20
    Points
    20
    Par défaut 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 ?

  2. #2
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    5 738
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 5 738
    Points : 14 869
    Points
    14 869
    Par défaut
    Salut

    Si j'ai bien compris, sous Firefox c'est: Shift + Ctrl + M
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

  3. #3
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    Bonjour,

    Citation Envoyé par ProgElecT Voir le message
    sous Firefox c'est: Shift + Ctrl + M
    Exact : "Vue adaptative"

    On peut citer aussi :


    Et bien d'autres, en cherchant un peu...

  4. #4
    Membre à l'essai
    Homme Profil pro
    Infographiste
    Inscrit en
    janvier 2017
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Infographiste
    Secteur : Arts - Culture

    Informations forums :
    Inscription : janvier 2017
    Messages : 42
    Points : 20
    Points
    20
    Par défaut
    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.

  5. #5
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    Je sais lire, merci.
    Inutile de recopier la même phrase...

    Une autre réponse ?
    • utiliser un smartphone

    Citation Envoyé par Obi Juan Kenobi Voir le message
    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.

  6. #6
    Membre à l'essai
    Homme Profil pro
    Infographiste
    Inscrit en
    janvier 2017
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Infographiste
    Secteur : Arts - Culture

    Informations forums :
    Inscription : janvier 2017
    Messages : 42
    Points : 20
    Points
    20
    Par défaut
    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.

  7. #7
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    Les solutions proposées fonctionnent AUSSI en local !
    Puisqu'elles ne dépendent que du navigateur.

    Voici d'autres solutions :


  8. #8
    Membre à l'essai
    Homme Profil pro
    Infographiste
    Inscrit en
    janvier 2017
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Infographiste
    Secteur : Arts - Culture

    Informations forums :
    Inscription : janvier 2017
    Messages : 42
    Points : 20
    Points
    20
    Par défaut
    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.

  9. #9
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    Pour te répondre, il faudrait, au moins pouvoir tester.

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

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 760
    Points : 40 037
    Points
    40 037
    Par défaut
    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.

  11. #11
    Membre à l'essai
    Homme Profil pro
    Infographiste
    Inscrit en
    janvier 2017
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Infographiste
    Secteur : Arts - Culture

    Informations forums :
    Inscription : janvier 2017
    Messages : 42
    Points : 20
    Points
    20
    Par défaut
    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 :

    Nom : ecran1.jpg
Affichages : 25
Taille : 120,5 Ko

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

    Nom : ecran2.jpg
Affichages : 26
Taille : 180,0 Ko

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

    Nom : ecran3.jpg
Affichages : 24
Taille : 123,1 Ko

    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.

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 760
    Points : 40 037
    Points
    40 037
    Par défaut
    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.

  13. #13
    Membre à l'essai
    Homme Profil pro
    Infographiste
    Inscrit en
    janvier 2017
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Infographiste
    Secteur : Arts - Culture

    Informations forums :
    Inscription : janvier 2017
    Messages : 42
    Points : 20
    Points
    20
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 16/05/2006, 12h53
  2. [Struts] ordre des éléments dans un tableau de propriétés
    Par zais_ethael dans le forum Struts 1
    Réponses: 2
    Dernier message: 09/05/2006, 16h54
  3. [C#] ordre des éléments dans un datagrid
    Par liliprog dans le forum ASP.NET
    Réponses: 3
    Dernier message: 19/09/2005, 17h31
  4. Supprimer des éléments dans une TreeView ?
    Par souch dans le forum Composants VCL
    Réponses: 4
    Dernier message: 16/09/2005, 13h20
  5. [swing] disposition des éléments dans un GridLayout
    Par al85 dans le forum Agents de placement/Fenêtres
    Réponses: 6
    Dernier message: 11/02/2005, 18h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo