Partage

Le Responsive ne marche pas avec un iphone ??

ce serait dommage...

pprevost2017

22 septembre 2018 à 11:42:23

BONJOUR,

j'essaie de comprendre et de solutionner un cas typique d'un site qui serait organisé en 3 colonnes

de largeur variable.

Lorsque la largeur d'écran est inférieure à 570 px, ce site

ne comporterait plus qu'une seule colonne.

Code CSS :

@media all and (max-width:569px)

{

...

}

@media all and (min-width:570px)

{

...

}

Jusque là, tout va bien...

Mais, bien des téléphones mobiles ont une excellente définition

et ont plus de 570 px de large -> ils affichent donc les

3 colonnes ce que je ne souhaite pas car alors chaque colonne

mesure 1,5 cm de large !!

Il faut donc tenir compte de la densité des pixels sur l'écran et

n'afficher qu'une seule colonne pour les petits (en cm) écrans

même s'ils comportent plus de 570 px de large.

Je ne sais pas faire.

Je précise que je suis débutant et que j'aimerais une explication

plus qu'un simple renvoi à une page de cours que je ne comprendrai pas .

Si une page de cours complète votre explication alors je

prends bien sûr !

Un grand merci à tous et expliquez lentement

je comprends... pas tout

PIERROT

Lamecarlate

22 septembre 2018 à 11:54:29

Bonjour,

as-tu bien mis dans le <head> la meta viewport ?

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

C'est ce qui permet d'harmoniser entre le zoom initial des mobiles (surtout iPhone), la largeur effective du viewport et ce que le mobile imagine qu'elle sera.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

pprevost2017

22 septembre 2018 à 13:47:33

   Bonjour,

    Merci pour ta réponse, je me suis contenté de faire
    ce code minimaliste car je souhaite trouver la solution à un problème
    ordinaire que se posera un jour tout développeur de sites :

    <html>
    <head>

    <title>QUELLE RESOLUTION !</title>

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

    <LINK HREF="toto.css" REL="stylesheet" TYPE="text/css" />

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

    $(document).ready( function()
    {

    }

    );

    </script>

    </head>

    <body>

    H E L L O W O R L D !

    </body>
    </html>

    Dans ce cas d'école mon but est de faire varier la couleur du fond suivant la résolution de l'écran :

    body
    {
    min-height: 100%;
    min-width: 100%;

    margin: 0;
    padding: 0;

    text-align: center;
    background: #aaaaaa;
    }

    @media (max-resolution:120dpi)
    {
    body
    {
    background: #ff0000;
    }

    }

    @media (min-resolution:121dpi)
    {
    body
    {
    background: #00ffff;
    }

    }

    La couleur de fond est bien celle attendue sur un PC car min-resolution est comprise.
    Il n'en va pas de même sur un iPhone 6, qui ne peut exploiter ce paramètre, sur ce
    mobile, la couleur de fond est celle proposée par défaut : #aaaaaa, car quelles que
    soient les valeurs saisies pour la résolution aucun bloc @media {} ne fonctionne.

    Je fais à coup sûr une erreur mais laquelle ?

    Merci

    PIERROT

Lamecarlate

22 septembre 2018 à 15:49:48

Bonjour,

Merci d'utiliser la mise en forme de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

----

Ensuite : la solution que je te donne t'affranchit de la contrainte de la densité de pixels.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

pprevost2017

22 septembre 2018 à 18:15:17

Merci pour ta réponse

Mon problème est avant tout d'afficher trois colonnes quand la largeur de l'écran dépasse 570 px mais...

de n'afficher qu'une seule colonne quand l'écran est petit (en cm) même si sa largeur dépasse 570 px.

En effet, dans ce cas chaque colonne aurait 1,5 cm de large ...

Il s'agit essentiellement d'un problème de largeur d'écran en cm et non en pixels.

Je te remercie pour cette idée mais mon niveau en HTML et assez moyen et je ne peux

dire si cette instruction saura éviter qu'on affiche trois colonnes quand l'écran

est trop petit (en cm) même s'il dépasse 570 px de large.

N'hésite pas à expliquer car ce n'est pas facile pour moi

s'il y a une autre technique, je prends aussi.

Merci

PIERRE GRENOBLOIS

Mewen_bzh

24 septembre 2018 à 9:42:39

Bonjour,

Je vais faire simple : je n'ai strictement rien compris à ton problème. Tu parles de fond de couleurs, puis de résolution, de densité de pixels, de colonnes et enfin de cm...

Reprenons depuis le début : suis les conseils de Lamecarlate (qui sont obligatoires) et explique nous clairement ton problème et ce que tu veux réaliser.

Comme dirait ce bon vieux Nicolas Boileau : "Ce que l’on conçoit bien s’énonce clairement, et les mots pour le dire arrivent aisément."

Je ne réponds pas aux messages privés.

pprevost2017

28 septembre 2018 à 3:27:07

bonjour,

Merci pour ta réponse, c'est vrai, c'est pas clair. J'ai fait un petit code plus haut où je faisais varier la couleur de fond du BODY de façon à m'indiquer si un bloc de media queries fonctionnait bien ou mal : la coul de fond du BODY était juste un indicateur et n'ai pas ce qui m'intéresse.

Oublions ça.

Pixels réels, pixels css et viewport…

J'avais vu et noté pas mal de choses sur le viewport grâce à Elephorm et openclassroom,

j'ai aussi regardé ce qui se dit chez Alsacreations car j'ai toujours eu du mal avec cette notion.

Excuse-moi pour les répétitions par rapport aux messages précédents:

Je t'envoie le code, il s'agit d'afficher 3 divs horizontalement lorsque l'écran est plus grand que 570px et d'afficher verticalement ces mêmes trois divs lorsque l'écran est plus petit que 570px.

Tout va bien sur un PC, mais pas sur un mobile.

En prime une photo de l'écran de mon iPhone :

- à gauche, ce qui se passe

- à droite, ce que je souhaite et que je n'obtiens pas

code HTML :

<html>

<head>

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

</script>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

code CSS :

body

{

min-height: 100%;

min-width: 100%;

margin: 0px;

padding: 0px;

text-align: center;

background: #0c0c0c;

}

#image1, #image2, #image3 { max-width:100%; }

#fond

{

position:relative;

visibility:visible;

display:none;

background: #0c0c0c;

padding: 0px;

margin: 0px;

margin-left: auto;

margin-right:auto;

border:none;

}

#div1

{

position:relative;

visibility:visible;

display:none;

padding: 0px;

margin: 0px;

border:none;

z-index: 10;

}

#div2

{

position:relative;

visibility:visible;

display:none;

padding: 0px;

margin: 0px;

border:none;

z-index: 10;

}

#div3

{

position:relative;

visibility:visible;

display:none;

padding: 0px;

margin: 0px;

border:none;

z-index: 10;

}

@media all and (min-width:570px)

{

#fond

{

display:block;

top: 20px;

width: 94%;

}

#div1

{

display:inline-block;

width: 30%;

}

#div2

{

display:inline-block;

width: 30%;

}

#div3

{

display:inline-block;

width: 30%;

}

@media all and (max-width:569px)

{

#fond

{

display:block;

top: 20px;

width: 94%;

}

#div1

{

display:block;

width: 94%;

}

#div2

{

display:block;

width: 94%;

}

#div3

{

display:block;

width: 94%;

}

Je n'y arrive pas après pas mal de tentatives, je pense que ce sera limpide pour toi

Merci en tous cas

PIERRE GRENOBLOIS

Le Cobriste 128

28 septembre 2018 à 9:58:58

Salut

Lamecarlate, il faut croire que tu n'écris pas assez gros.

Lamecarlate

28 septembre 2018 à 10:26:09

En effet.

Merci d'utiliser la mise en forme de code

Autre point, Pierre : lâche du lest. Franchement. Si sur un téléphone tu n'as pas le bon rendu parce que sa résolution est supérieure à 570px, bin change la valeur de ton point de rupture. Passe à 640px, par exemple. Inutile de te torturer pour ça.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

pprevost2017

29 septembre 2018 à 18:12:53

Bonjour,

Merci pour tes réponses.
Je comprends un peu mieux mon iPhone :
nombre de pixels : 640 px
nombre de pixels css : 320 px
Viewport par défaut d'un navigateur safari mobile : 980px

Cependant, mon but ne sera jamais de développer pour un ou plusieurs mobiles spécifiques.
Ta suggestion est vraiment la bonne… mais… tu n'y peux rien, je n'arrive jamais
à modifier la valeur du Viewport par défaut qui vaut 980px pour un safari mobile.

C'est comme si l'instruction <meta name="viewport" content=… n'était pas reconnue
par un iPhone ce qui est surprenant puisque cette instruction maintenant adoptée par tous
a été créée par Apple…
Qu'on lui affecte une valeur ou la valeur de device-width : ça ne change jamais rien, la comparaison
avec les valeur des blocs @media se fait toujours par rapport à 980px !
Tu me dis tout l'intérêt de l'instruction <meta name=… j'en suis tout à fait convaincu mais
cela ne fonctionne pas chez moi. Même remarque pour le zoom initial que je ne parviens
jamais à modifier...

<html>
<head>


<title>H E I N ?</title> 
   
<meta name="viewport" content="width=device-width, initial-scale=0.33, shrink-to-fit=no">    

<LINK HREF="klubr2.css" REL="stylesheet" TYPE="text/css" />

<script type="text/javascript" src="jquery.js"></script>


</script>




</head>

<body>

<div id="fond">
    
   <div id="div1">
      <img src="images/photo1.png" id="image1" />
   </div>
   <div id="div2">
      <img src="images/photo2.png" id="image2" />
   </div>
   <div id="div3">
      <img src="images/photo3.png" id="image3" />
   </div>

</div>





</body>
</html>

Quel beau format pour contenir le code ! Aaaaaaaaah je jouis !

body 
{
   min-height: 100%;
   min-width:  100%;

   margin:  0px;
   padding: 0px;

   text-align: center;
   background: #0c0c0c;
}



#image1, #image2, #image3 { max-width:100%;  }   


#fond   
{  
   position:relative; 
   display:block;
   
   width: 90%;

   margin-left:auto;
   margin-right:auto;

   background: #0c0c0c;

   border:none;
}


#div1, #div2, #div3 
{  
   position:relative; 

   padding:  0px; 
   margin:   0px;

   border: 1px solid #000000;
}


@media screen and (min-width:981px)
{

   #fond   
   {
      background: #995522;
   }


   #div1, #div2, #div3  
   {
      display:inline-block;
      width:   30%;
   }

}



@media screen and (max-width:980px)
{

   #fond   
   {
      background: #995522;
   }


   #div1, #div2, #div3  
   {
      display:block;
      width:   90%;
   }

}

Quel beau format pour contenir le code ! Aaaaaaaaah je jouis !

Je ne peux me contenter d'un point de rupture à 980px,

voilà pour le code, que j'ai simplifié, si tu comprends pourquoi je n'arrive pas à mettre en oeuvre

cette instruction, ce sera super.

Merci encore, quelle excitation...

Pierre grenoblois