Bonjour,
La résolution n'a rien à voir avec la largeur du viewport. Pour une machine donnée, elle est fixe tout le temps, puisqu'il s'agit d'une densité de pixels.
Ton hack pour safari joue sur le fait que safari ne sait pas (ou plutôt ne sait pas encore) ce que c'est que l'unité dpcm.
1) il marche pour l'instant, mais si ça se trouve il ne marchera plus avec la prochaine version de safari.
2) tu peux mettre n'importe quelle valeur assez grande après max-resolution, ça fera la même chose quelque soit la largeur du viewport.
3) dpcm est une unité de densité, ce n'est pas une unité de longueur. Ça n'a aucun sens de vouloir convertir des dpcm en px.
4) c'est plus facile de mettre un min-resolution:.001dpcm qu'un max-resolution parce que comme ça, tu es sûr de ne pas te tromper.
5) pour bien faire, il faudrait trouver la vraie raison de ton problème d'affichage avec safari, mais ta page est un tel bazar qu'il faudrait de la chance pour trouver. C'est toujours le même problème avec les cms : pour afficher 3 malheureuses boites de couleurs différentes, ils ont besoin de 10 millions de lignes de code.
6)
Tu ferais mieux de mettre tranquillement de l'ordre dans ton code et de le simplifier plutôt que d'utiliser ce genre de combine, vu que le bug a en fait des conséquences assez limitées.
7) En attendant, si tu veux avoir une règle css qui s'applique à safari uniquement en fonction de la largeur du viewport, tu peux par exemple utiliser le code ci-dessous (ici pour 1024px, à toi de voir s'il faut mettre min-width ou bien max-width). Il suffit en fait de mettre tes @media habituelles sur la 2e ligne de ce code :
@media not all and (min-resolution: .001dpcm) {
@media screen and (max-width: 1024px) {
.row-margin-title-home {
margin-top: 45px !important;
}
}
}
Amicalement,
Modifié par parsimonhi (14 Nov 2020 - 10:13)
