Densité de pixels

Question

17 Sep 2018 à 22:43

BONJOUR,

C'est une question idiote Smiley langue

, j'en suis désolé mais mes
compétences ne me permettent pas de trouver la réponse tout seul...
j'essaie de réaliser un site qui est organisé en 3 colonnes
de largeur variable.
Lorsque la largeur d'écran est inférieure à 570 px, mon site
ne comporte plus qu'une seule colonne.

@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 résolution
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 Smiley cligne

.

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

_laurent

Modérateur

18 Sep 2018 à 02:48

Salut !

pierregrenoblois a écrit :
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 .

Et que dirais-tu d'une page de cours que tu peux comprendre ? Smiley lol

Je vais pas paraphraser un contenu bien écrit quand meme ! Un peu de confiance en toi c'est a ta portée !

pierregrenoblois a écrit :
Il faut donc tenir compte de la densité des pixels sur l'écran

Yes exactement. Si tu regarde l'article (ici même) expliquant les media queries https://www.alsacreations.com/article/lire/930-css3-media-queries.html (ou bien la documentation hein) tu verras qu'on peut jouer avec :

resolution
      résolution du périphérique (en dpi, dppx, ou dpcm)

MAIS avant de jouer avec ça, tu as un autre soucis en fait. Un soucis de viewport. C'est la taille/resolution de ton espace d'affichage. Voila encore un article écrit ici même qui explique tout ca : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html
En gros il suffit de mettre

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

dans le head de ton HTML et tes problèmes s'en iront (normalement). Mais j’espère que tu prendra de lire les article et d'essayer de comprendre. C'est a force de copier coller des solutions qu'on avance et qu'on se retrouve perdu sans se souvenir de rien. Smiley smile

Je suis sur que tu comprendras tout !

Bon code

pierregrenoblois

19 Sep 2018 à 16:45

Bonjour,

Merci pour ta réponse, je me suis contenté de faire
cette page : difficile de faire plus simple !

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

Mon but, 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 Smiley ravi

une erreur mais laquelle ?

Merci Smiley biggrin

PIERROT

JENCAL

19 Sep 2018 à 16:49

essaye de faire @media screen and (min-resolution:121dpi)
Modifié par JENCAL (19 Sep 2018 - 17:17)

pierregrenoblois

19 Sep 2018 à 18:46

merci pour ton aide, c'est sympa
pour l'instant ça marche toujours pas sur ce p... d'iphone 6 je cherche sur internet au cas où je trouverais qqchose là dessus

_laurent

Modérateur

20 Sep 2018 à 10:09

Salut,

Si on check le tableau de compatibilité https://caniuse.com/#feat=css-media-resolution
Apparament IOS n'aime pas trop ça. Apparament il faut utiliser -webkit-min-device-pixel-ratio : https://developer.mozilla.org/fr/docs/Web/CSS/@media/-webkit-device-pixel-ratio
Mais de ce que j'en ai compris c'est pas exactement la même chose...

@media (-webkit-min-device-pixel-ratio: 2) {
...
}
@media (min-resolution: 120dpi) {
...
}

Au passage :

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

et équivalent à :

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

ou

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

Ce qui permettrait de t'affranchir de la partie gestion d'IOS !
La derniere solution mettra le bg en rouge partout SAUF pour une resolution inferieure a 120dpi donc sur un pc.
Ca colle ?
Modifié par _laurent (20 Sep 2018 - 10:22)

pierregrenoblois

22 Sep 2018 à 15:26

Bonjour,

Merci pour ton message et pour ton aide.

Je cherche surtout à pouvoir connaître la taille en cm de l'écran de l'internaute pour éviter d'afficher 3 colonnes lorsque cet écran ne mesure pas plus de 6 cm de large par exemple.

Afficher une couleur différente pour le body n'étant pas mon objectif mais juste un programme minimaliste destiné à savoir la résolution de l'écran est bien détectée sur un PC, une tablette ou un mobile quel qu'il soit.

Je ne sais pas si la valeur de (-webkit)-min-device-pixel-ratio pourra me renseigner car cette caractéristique pourrait être celle d'un écran 5 pouces ou celle d'un écran 21 pouces.

En tous les cas je te remercie, j'avoue que je m'attendais à crouler sous les réponses de nombreux internautes car ce problème me semble assez ordinaire mais je suis pas f... de
trouver la solution tout seul .

PIERROT GRENOBLOIS

_laurent

Modérateur

22 Sep 2018 à 17:10

Salut,

pierregrenoblois a écrit :
Je cherche surtout à pouvoir connaître la taille en cm de l'écran de l'internaute pour éviter d'afficher 3 colonnes lorsque cet écran ne mesure pas plus de 6 cm de large par exemple.

Afficher une couleur différente pour le body n'étant pas mon objectif mais juste un programme minimaliste destiné à savoir la résolution de l'écran est bien détectée sur un PC, une tablette ou un mobile quel qu'il soit.

Ah ! Tu ne t'es pas parti du bon coté alors je pense ! Smiley smile

Si tu veux juste faire du responsive tu n'as pas besoin de t’intéresser à la densité de pixel.

Il suffit juste de regarder les tailles en px (comme tu avait fait au début) et ne pas oublier la meta (comme je t'avais dis mais tu as en même temps passé les media queries avec les dpi) :


<!-- Pour que le site n’apparaisse pas en tout petit à cause du gros dpi -->
<meta name="viewport" content="initial-scale=1">


/* style par défaut */
body {
      background: #00ffff;
}

/* Style appliqué sur les écrans de moins de 800 pixels */
@media (max-width:800px) {
      body {
            background: #ff0000;
      }
}

La meta fera en sorte que les dpi n'intervienne pas, et il faudra choisir tes points de rupture en fonction de ton design et non de ton périphérique. Smiley smile

pierregrenoblois

22 Sep 2018 à 17:49

Bonjour,

Désolé je m'explique mal.

j'essaie de réaliser un site qui est organisé en 3 colonnes
de largeur variable.
Lorsque la largeur d'écran est inférieure à 570 px, mon site
ne comporte plus qu'une seule colonne.

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

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

Jusque là, tout va bien...
Mais, les téléphones mobiles ont souvent une excellente résolution
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 !

Comme tu le vois, je suis bien obligé de tenir compte de la taille en cm de l'écran (et donc de sa résolution) pour afficher 1 colonne et non 3 sur un écran qui ne ferait que 6 cm de large...

Un grand merci à toi seule personne à me répondre

PIERRE GRENOBLOIS

_laurent

Modérateur

24 Sep 2018 à 11:52

Coucou,

Je pense avoir bien compris ta problématique.

As-tu essayé ma solution ? Je suis prêt a parier que non ! Smiley lol

Alors je vais répéter une 3eme fois en essayant d'être un peu plus clair, c'est certainement que je m'explique mal. (Par contre je ne répondrai une 4eme fois la même chose hein).

Je te laisse lire cet article : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html (c'est pas très long est assez intéressant)

Dedans tu pourras y trouver l'explication du vewport et la différence entre la largeur reelle, le viewport, la largeur en "pixel CSS" etc.

Tu pourras également voir l'effet de la meta dont je t'ai parlé dans ma précédente réponse et voir que ca permet de garder une échelle de pixel similaire à l’affichage d'un écran PC. (au passage on ne parle pas en cm en web)

Donc juste, lis l'article et applique la solution que je t'ai donné (et qui est celle de l'article). Si tu as des soucis on essaiera de voir ce qui n'a pas marché.

pierregrenoblois

27 Sep 2018 à 23:35

Bonjour,

Je te remercie de ta patience avec moi car j'ai une certaine tendance à ch... dans la colle.
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>

<title>H E I N ?</title>

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

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

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
Modifié par pierregrenoblois (27 Sep 2018 - 23:38)

pierregrenoblois

6 Oct 2018 à 00:48

Modifications effectuées : ça marche à part petit problème de viewport

Bonjour,
Merci pour tes réponses.

Mon iPhone :
nombre de pixels : 640 px
nombre de pixels css : 320 px
Viewport par défaut d'un navigateur safari mobile : 980px

Mais mon but ne sera jamais de développer pour un ou plusieurs mobiles spécifiques.
J'ai tout simplifié et j'utilise Flexbox

ça marche MAIS… 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=1">    
<LINK HREF="klubr2.css" REL="stylesheet" TYPE="text/css" />
 
</head>
<body>
 
<div id="mapage">
 
   <div>
      <img src="images/photo1.png" />
   </div>
   <div>
      <img src="images/photo2.png" />
   </div>
   <div>
      <img src="images/photo3.png" />
   </div>
 </div>
</body>
</html>


body 
{
   display:flex;
   flex-direction: row;
   justify-content:center;
   align-items:center;
 
 
   min-height: 100%;
   min-width:  100%;
 
   margin:  0px;
   padding: 0px;
 
 
   background: #0c0c0c;
}
 
 
 
img { max-width:100%;  }   
 
 
#mapage   
{  
   display:flex;
 
   width: 90%;
 
   margin-left:auto;
   margin-right:auto;
 
   background: #0c0c0c;
 
   border:none;
}
 
 
#mapage div
{  
   padding:  0px; 
   margin:   0px;
 
   border: 1px solid #000000;
}
 
 
@media screen and (min-width:981px)
{
 
   #mapage   
   {
      flex-direction: row;
      justify-content:center;
      align-items:center;
      background: #AA8888;
   }
 
}
 
 
 
@media screen and (max-width:980px)
{
 
   #mapage   
   {
      flex-direction: column;
      justify-content:center;
      align-items:center;
      background: #8888AA;
   }
 
}

Je ne peux me contenter d'un point de rupture à 980px (bcp trop grand et contraire au principe du viewport),
voilà pour le code, que j'ai simplifié, si tu comprends pourquoi je n'arrive pas à mettre en œuvre cette instruction, ce sera super.
Merci

Pierre grenoblois

Sujet clos

CSS et mise en forme, CSS3

Densité de pixels