web-dev-qa-db-fra.com

Arrêter Firefox DPI Scaling (lorsque le paramètre Windows est à 125%)

Je suis en train de créer une page Web et de la tester en chrome, mais dans Firefox - elle est agrandie.

Cela est dû au fait que mon DPI dans Windows est défini à 125% et que Firefox le détecte et ajuste chaque page Web en conséquence.

Cependant, ma page Web n'est pas conçue pour être affichée à un niveau de zoom aussi élevé, les images ne sont pas conçues pour être affichées aussi gros et par conséquent, elles semblaient floues/pixellisées. La présentation générale de la page est également perturbée, car tout est si grand.

Maintenant, cela n’affecte pas la plupart des gens, car leur DPI serait à 100% sous Windows. Cependant, je veux que ce soit la même sur tous les navigateurs.

J'ai cherché et trouvé des solutions quant à la désactivation de cette "fonctionnalité" par l'utilisateur, mais je souhaite pouvoir le désactiver à partir de mon site Web, afin que l'utilisateur ne se trompe pas en premier lieu.

par exemple. un post dit:

1) Tapez about:config dans la barre d'adresse 
2) recherchez layout.css.devPixelsPerPx 
3) changer la valeur de layout.css.devPixelsPerPx de -1.0 à 1.0 

Mais ce n'est pas ce que je cherche. Y at-il un moyen de désactiver cela à partir de CSS/HTML/quoi que ce soit?

Merci.

cssfirefoxzoomscalingdpi
30
Brugsen

Cela m'a frustré aussi, mais heureusement, il existe une solution.

Accédez à about:config. (Cliquez sur accepter pour tout avertissement vous invitant à faire attention aux fonctionnalités avancées)

Recherchez layout.css.devPixelsPerPx et remplacez sa valeur par 1.0 et votre problème devrait être corrigé.

C'était quelque chose implémenté dans Firefox 22 .

13
Terry Robb

Vous pouvez facilement laisser les utilisateurs de votre site Web définir des paramètres à des niveaux de zoom supérieurs en incluant une requête multimédia telle que:

@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
       only screen and(      -o-min-device-pixel-ratio: 5/4 ),
       only screen and( min-resolution: 120dpi ),
       only screen and( min-resolution: 1.25dppx ) {
    body {
        font-size: 1rem;
    }
}

Voir cet article pour une explication détaillée et pourquoi la solution nettoyée de la requête multimédia est suffisante pour prendre en charge un large navigateur: IE9 +, Fx3.5 +, Opera9.5 +, les navigateurs Webkit Chrome et Safari, à la fois Mobile.

10
Volker E.

Vous pouvez essayer quelque chose comme ça ci-dessous. Cette mise en garde présente quelques inconvénients, mais dans certains cas, il vaut la peine de l’utiliser.

    @media screen and (min-resolution: 120dpi) { 
    /*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
    body {transform: scale(0.8);transform-Origin:top left;width: 125%;height: 125%;}
}

L'échelle de l'exemple /*body....*/ commentée peut être plus facile à comprendre et pire, p.ex. parce que la mise à l'échelle doit être effectuée sur la base de la règle css de transformation-Origin en haut à gauche de Edge. Les choses peuvent alors être mieux rendues, en particulier dans Chrome.

si vous utilisez width: 125%, votre RWD css devrait réagir différemment à la modification de la taille du navigateur par rapport à ce que vous attendiez lorsque le rapport d'écran était de 100% . Et vous pourriez raisonnablement accepter cela - il s'agit de RWD et la différence est de 25%. Mais certaines personnes pourraient vouloir adapter leur css comme ceci:

@media screen and (min-width: 1000px)

vous devez également ajuster:

@media screen and (min-width: 800px)

probablement pas 1250px mais 800px comme je le faisais.

Edge, Chrome, FF font très bien. IE 11 a rendu le pire, mais pas sans espoir.

Il y a quelques problèmes dans FF (pas Edge, chrome) lors du développement de champs sélectionnés - solution css select . Certaines bordures peuvent être visibles, certaines disparaissent sur FF (peut-être pas Edge, chrome)

Il peut y avoir des problèmes non mentionnés ici, comme l'utilisation d'un carrousel comme owlcarousel sur votre page.

Pourtant, je pense que la probabilité de gagner plus de temps avec cet exemple testé est encore trop faible.

Vous devez utiliser une mise à l'échelle exacte, telle que 0,8 pour un écran de 125%, afin que vos images soient rendues aussi précises que possible.

J'ai remarqué que lorsque vous passez à différentes résolutions dpi en utilisant ctrl +/i dans un navigateur de bureau et en utilisant des gestes multitouch dans les navigateurs mobiles, un navigateur change également en dpi. Toute solution utilisant @media résolution min/max risque alors de ne pas fonctionner correctement. . Ce qui est nécessaire dans CSS est de lire la résolution du système, pas un navigateur. Cependant, comme je vois cette résolution, le changement ne se produit pas comme lorsque quelqu'un modifie la taille du navigateur manuellement ou en faisant pivoter un appareil mobile.

Merci Tatsuyuki Ishi pour avoir corrigé certaines erreurs de ma réponse.

2
OpenEX

Réglez-le sur 1.25: l'interface utilisateur est plus grande, mais le site Web est réinitialisé sur un mappage de pixels à 100%.

0
jonh