28172 sujets

CSS et mise en forme, CSS3

[Résolu] Rendu différent selon la Mise à l'échelle et disposition de W

Bonjour à tous et à toutes,

J'ai un souci récurrents (sur différents projets) avec le rendu des pages que j'intègre.
En effet, j'intègre sur un ordi fixe avec un écran "standard" en 1920 x 1080 px, avec un zoom à 100% (quel que soit le navigateur) et (ça a son importance) avec une Mise à l'échelle et disposition elle aussi à 100% (recommandée par Windows) (sous Windows 10, sur le bureau, faire un clic droit > Paramètres d'affichage).
Quand j'ai fini d'intégrer, j'envoie aux clients (différents selon le projet) pour qu'il fasse sa recette.
Or, de plus en plus souvent les clients me renvoient une capture écran du rendu sur ordinateur en disant que tel ou tel élément ça ne va pas. Pourtant, quand je leur demande quelle est la résolution de leur écran, ils me répondent qu'elle est de 1920 x 1080 px et qu'ils sont à 100% de zoom. Smiley rolleyes
En cherchant pourquoi/comment ils pouvaient avoir un rendu (si) différent de moi avec les mêmes paramètres, j'ai fini par comprendre d'où venait le problème.
La quasi-totalité des clients qui avaient un rendu différent du mien ont, d'une part, un ordinateur portable et, par conséquent, d'autre part, une Mise à l'échelle et disposition (recommandée par Windows*) différente de 100% (parfois c'est 110%, parfois c'est 150%... selon le client).
* Je mets "recommandée par Windows" car du coup c'est cette Mise à l'échelle et disposition qui est mise par défaut par Windows et que laissent les clients.

Ma question est : comment faire pour que j'obtienne le même rendu que mes clients (et les visiteurs de leur site) quelle que soit leur Mise à l'échelle et disposition dès lors que la résolution de leur écran soit de 1920 x 1080 px et que le zoom sur leur navigateur soit à 100 % ?

Je vous remercie pour votre réponse.
Bonne journée Smiley cligne
Modifié par spip93 (07 Apr 2021 - 17:51)
Exemple concret :
Je me suis aperçu que plutôt que de changer la Mise à l'échelle et disposition de Windows, j'avais le même rendu si le navigateur était au même pourcentage de zoom.
Autrement dit Mise à l'échelle et disposition à 110% = Zoom navigateur à 110%

Partant de ce constat, je regarde un élément de ma page.
Règles CSS à 100 % :

@media (min-width:1920px) {
    .diaporama-header,
    #full-carousel,
    .carousel-inner {
	    height: 40vw;
    }
}

Règles CSS à 110 % :

.carousel {
	height: 250px;
}


Ok, le zoom est différent, mais comment ça se fait que les règles changent alors que la résolution est la même ?
Administrateur
Bonjour,

au final, c'est un niveau de zoom qui s'ajoute et avec un site Responsive il n'y a pas grand chose à faire je trouve.
J'ai longtemps eu un ultrabook avec dalle full HD donc 1920px de large où je ne voyais pas grand chose avec un zoom "OS" de 100% et même 125% ; j'étais donc à 150%. Ça revient à une largeur de viewport de 1920 / 1,5 = 1280px et puis voilà Smiley lol
Si je zoomais avec Firefox à 200% pour un audit accessibilité, c'était alors l'équivalent de 640px. À 400% pour vérifier l'absence d'ascenseur horizontal : équivalent de 320px.
EDIT: tout dans Firefox indique les valeurs perçues (Devtools, extensions : largeur = 1280px par exemple), par contre un programme de retouche/dessin tel que Photofiltre dans lequel je colle une capture d'écran indique 1920px. La gymnastique entre "je mesure une marge de 30px sur le bitmap donc c'est 20px dans ma page" n'est pas des plus pratiques Smiley baille . Là il faut revenir à un zoom OS de 100% temporairement ou ne pas avoir beaucoup de mesures à faire...

À toi de voir si tu as une "stratégie" pour le Responsive Web Design : Mobile First mais ça ne change rien au résultat final ça, choix des points de rupture (quantité et valeurs) pour le contenu et éventuellement différemment pour l'entête des pages et la navigation, etc
Modifié par Felipe (08 Apr 2021 - 10:02)
Merci pour l'explication Felipe.
Ça m'a l'air bien compliqué Smiley rolleyes J'ai encore quelques séances d'arrachages de cheveux en perspective Smiley ohwell
Encore merci Smiley merci
Bonne journée Smiley cligne
Modifié par spip93 (13 Apr 2021 - 10:01)
Sujet clos
Aller à