web-dev-qa-db-ja.com

Firefox DPIスケーリングの停止（Windows設定が125％の場合）

現在、Webページを作成してchromeでテストしていますが、Firefoxではズームインされています。

これは、Windowsでの私のDPIが125％に設定されており、Firefoxがこれを検出し、それに応じてすべてのWebページを調整するためです。

ただし、私のWebページは、このようなズームレベルで表示されることを意図したものではなく、画像がそれほど大きく表示されるように作られていないため、ぼやけ/ピクセル化して見えました。すべてが非常に大きいため、ページの一般的なレイアウトも混乱しています。

現在、これはほとんどの人には影響しません。WindowsではDPIが100％になるためです。ただし、すべてのブラウザーで同じにする必要があります。

私は検索し、ユーザーがこの「機能」を無効にするための解決策を見つけました-しかし、私は自分のウェブサイトから無効にすることができるようにしたいので、そもそもユーザーにとって間違って見えません。

例えば1つの投稿は言う：

1）アドレスバーにabout:configと入力します
2）layout.css.devPixelsPerPxを検索します
3）layout.css.devPixelsPerPxの値を-1.0から1.0に変更します

しかし、それは私が探しているものではありません。 CSS/HTML /何かからこれを無効にする方法はありますか？

ありがとう。

cssfirefoxzoomscalingdpi
30
Brugsen

これも私をイライラさせましたが、幸いなことに解決策があります。

about:configに移動します。 （高度な機能に注意するよう指示する警告が表示されたら[同意する]をクリックします）

layout.css.devPixelsPerPxを検索し、その値を1.0に変更すると、問題を修正する必要があります。

Firefox 22 で実装されたものでした。

12
Terry Robb

次のようなメディアクエリを含めることで、より高いズームレベルの設定でユーザーにWebサイトを簡単にアドレス指定できます。

@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;
    }
}

詳細な説明についてはこの記事 と、メディアクエリのクリーンアップソリューションが広範なブラウザーサポートに十分である理由をご覧ください：IE9 +、Fx3.5 +、Opera9.5 +、Webkit Browsers ChromeとSafari、デスクトップとモバイルの両方。

11
Volker E.

以下のようなものを試すことができます。これを使用するいくつかの警告がありますが、状況によっては使用する価値があります。

    @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%;}
}

コメントされた/*body....*/の例のスケールは理解しやすいかもしれないが、さらに悪いかもしれない。スケーリングは、transform-Origin cssルールの左上エッジに基づいて行う必要があるためです。その後、特にChromeで物事をより良くレンダリングできます。

width: 125%を使用する場合、RWD cssは、画面比率が100％のときに予想したものとは異なるため、ブラウザーサイズの変更に対して異なる反応を示す必要があります。そして、あなたはこれを合理的に受け入れるかもしれません-これはRWDであり、差は25％です。ただし、CSSを次のように適合させたい人もいます。

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

また、調整する必要があります。

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

おそらく1250pxではなく、800pxでした。

Edge、Chrome、FFは非常に優れています。 IE 11は絶望的ではないが最悪のレンダリングを行った。

選択フィールドを展開するときに、FF（エッジ、クロムではなく）にいくつかの問題があります-ソリューションCSS選択。一部の境界線はFFで表示される場合があります（エッジ、クロムではない場合があります）

ページでowlcarouselのようなカルーセルを使用する場合など、ここで言及されていない問題がいくつかある可能性があります。

それでも、この例のテストがまだ少なすぎるため、時間を節約できる可能性は高いと思います。

画像を可能な限り鮮明にレンダリングするには、125％の画面に対して0.8のような正確なスケーリングを使用する必要があります。

デスクトップブラウザーでctrl +/iを使用してさまざまなdpi解像度に切り替え、モバイルブラウザーでマルチタッチジェスチャを使用すると、ブラウザーもdpiを変更するため、@ media min/max-resolutionを使用するソリューションが期待どおりに動作しない場合があることに気付きました。 cssで必要なのは、ブラウザではなくシステムの解像度を読み取ることです。ただし、この解像度の変更は、誰かが手動で、またはモバイルデバイスを回転させてブラウザーのサイズを変更した場合のようには行われません。

私の答えのいくつかの誤りを訂正してくださった石達之に感謝します。

3
OpenEX

1.25に設定します。これにより、ユーザーインターフェイスは大きくなりますが、Webサイトは100％ピクセルマッピングにリセットされます。

0
jonh