クライアントのブラウザズームをどのように処理しますか？

ページ、ギャラリーにたくさんの画像があります。画像を鮮明に保ちたいので、ブラウザのスケーリングを行わず、画像の元の寸法を使用します。

ただし、これはブラウザーのズームレベルが100％の場合にのみ機能します。ズームレベルを増減すると、画像の品質が低下します。

一部のクライアントは、デフォルトで異なるズームレベルを実際に持っています。どうやってそれを処理することができますか、私たちはそれをまったく処理しますか？

乾杯

私は他の回答のほとんどはポイントを逃したと思う：これはユーザーの好みをオーバーライドに関するものではありません、それは「別名各CSSピクセルのための複数の物理ピクセル割り当てるユーザーのデバイスの一般的なシナリオでは最高品質の画像を与えることについてですリファレンスピクセルを画像内で、ブラウザが画像を拡大し、ピクセル化して粒子が粗くなります。

以下に私の提案する解決策がありますが、最初にこれを実現できる4つの方法があります。

• 最もまれ： ユーザーがズームインすることを選択します。それは彼らの選択なので、それほど大きな問題ではありません。
• 驚くほど一般的： ユーザーのブラウザはデフォルトでズームインされています。たとえば、多くの高ピクセル密度のWindowsマシンはデフォルトで125％以上にズームされていますが、最近（混乱して！）、なぜすべてが突然粒子が粗く見えるのか疑問に思って頭を掻き回します。
• 非常に一般的な：ほとんどのAndroidデバイス持つ（およびその他のデバイス？）ピクセル比ごとに「CSS画素は」実際に複数の物理ピクセルを使用して表示されることを1よりも大きいのがこの手段-に200pxの画像セットによって200pxのようにwidth: 200px; height: 200px;なり、実際のスケール200 x 200ピクセルを超える200 x 200ピクセルの画像で、粒子が粗くなる可能性があります。
• 非常に一般的：最近の多くのAppleデバイスには「網膜ディスプレイ」があります。これは、ピクセル比2のAndroidデバイスと基本的に同じですが、マーケティングが改善され、名前で検出できるカスタムプロパティがいくつかあります。

これらのいずれも、驚くほど粗い画像のギャラリーのジョンの問題になります。

私は誰かがこの問題に対する素晴らしい解決策を持っていることを望んでいましたが、今のところは、最も効果的ではあるが普遍的に可能なものから始めて、私の好みのオプションがあります：

1. 可能であれば、vector-SVG（またはIE8をサポートする必要がある場合はRaphael.js）に移動してください。現実的には、これはアイコン、図などのオプションに過ぎず、写真のオプションではありません。非常に複雑なSVGは、処理が必要なため、ローエンドのモバイルでは扱いにくい場合があります。
2. 可能であれば、デバイスのピクセル比を検出し、それに基づいて画像を提供します。これは、Windows上のFirefoxがズームインおよびズームアウトするとピクセル比の読み取り値を変更するため、Windows上のFirefoxの問題も解決できます。欠点は、サーバー側とクライアント側での開発作業を伴う厄介なコーディングの問題になることです。

3. 1.と2.が不可能な場合でも、それは本当に重要であり、画像の品質は、たとえば読み込み時間よりも重要です。画像を2倍にするだけです。

   • これは、Googleがホームページでロゴを使用して行うことです。つまり、269ピクセルx 95ピクセルのコンテナーにある538ピクセルx 190ピクセルのPNG画像をつぶします。また、レスポンシブ画像の機能とほぼ同じです。

   • IEの古いバージョンは画像の縮小にひどいため、これは悪い習慣と見なされていましたが、現在では非常にまれにしか使用されておらず、高ピクセル密度の画面よりもはるかに一般的ではありません。画像サイズが大きくなり、ロード時間が長くなるため、これはいささか望ましくありません。これは、ケースバイケースで判断する必要があるトレードオフです。

   • 2倍を超える比率のデバイスはほとんどなく、200％を超えてズームインするユーザーはほとんどいないため、サイズが2倍になり、画像の50％のスケーリングは他の量よりもきれいです。
4. 1、2が不可能で、ロード時間が3の優先度よりも高い場合、他のオプションを認識していません。インターネット上の半分のサイトに同じ問題があるため、それを心配しないことをお勧めします。 、あなたのサイトでこの問題を抱えている人々は、他のサイトでもこの問題を抱えています。地獄、Windows上のFirefoxは、独自のUIボタンをピクセル化します ...

DA01はコメントし、あなたはそれについて何をするべきではありません。

ズームはユーザー指定のオプションであるため、制御されます。彼らが台無しにすることに決めた設定はあなたの責任ではないはずです。

さまざまなブラウザーとバージョンを考慮に入れることができますが、合理的に言えば、ユーザーのズームを考慮すべきではありません。

確かに125％または150％を占めるかもしれません（そうする必要さえないかもしれません）。しかし、200％、300％、それ以上？意味がありません。

ユーザーが高コントラストウィンドウテーマを使用している場合はどうなりますか？拡大鏡を常に使用している場合はどうなりますか？誰も気にしない？

理想的には、あなたのウェブサイトは、小さなズームの違いの間で実際の違いを生じさせないほど十分に柔軟です。

もちろんこれは私の意見ですが、私が勤務する会社はまた、ズーム設定をサポートしていないことをお客様に明示しています。

他の人々はあなたが直面する問題についていくつかの素晴らしいヒントを与えてくれました。私はこの分野では良いチュートリアルをするのに十分ではありませんが...

ユーザーの解像度/デバイスに応じて調整するレスポンシブサイトを設計し、必要に応じて画像を拡大または縮小するのではなく、要求に応じて画像を高解像度または低解像度ファイルに切り替えるコードを探している場合があります。

最後にこれを実行しようとしたとき、media-query.jsとpicturefill.jsを使用しました。http://responsivedesign.is/resources/images/picture-fillを参照してください。一部の画像が2列にまたがる3列のレイアウトがありました...ブラウザウィンドウを十分に小さくすると、大きな画像は1列のみの小さな解像度バージョンに切り替わります。ユーザーのブラウザは、必要なバージョンのファイルをロードするだけです。（そして、私の場合、石工プラグインはすべてを収容するために移動します）。

もちろん、ユーザーはjavascriptを有効にする必要があります...

ユーザーに手を強制することはできません。ユーザー設定は、あなたのものではありません。設定とそれらの回避は、ユーザーが何かをした理由があるかもしれないという悪い考えです。いずれの場合も、さまざまなデバイスにわたって何も保証することはできません。

実際、技術的な側面に入ると、さらに興味深いものになります。あなたは本当にあなたのウェブページで王国への鍵を与えます。ユーザーがWebページをダウンロードすると、ユーザーは好きなようにWebページを作成できるようになります。このレイヤーを制御することはできません。ユーザーマシン上で実行されるため、ユーザーは何でもできます。stackexhangeでさえ、あなたのものと同じように私のコンピューター/モバイルで見えません。GUIのいくつかの側面を自動的に変更して、2つのレンダリングバグを修正し、2つのショートカットを追加しました。

ぼやけた写真（別名、写真家の悪夢）につながるHiDPI画面上のアップスケール画像の迷惑な振る舞いも、かなり長い間悩みました。また、画像に対してそれを無効にする単純なCSS属性はないのだろうかと思いました。

CSSを使用した現在のソリューションは次のようになります。

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

次のステップでは、クラスを使用して、必要に応じて異なる画像サイズを定義および設定します。画像サイズを動的に取得する方法がわかりません。CSS関数attr（）は、このためには機能しないようです。

ですから、これはプログラミングの問題になります。ただし、JQuery、または単にプレーンcssを使用しても、ユーザーの画面幅、画面の高さなどに基づいて異なる画像を表示できます。

繰り返しますが、これはおそらくスタック交換ではありません。

これをサイトのヘッドでHTMLを介して簡単に行うことができます

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

これは、すべてのタイプのサイトで開発者に推奨されるわけではありませんが、あなたが求めていることを達成するはずです。

それが役立つことを願っています：cssルール変換：bodyタグまたは他のスケール-完璧ではないここを参照してください：

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741