javascript - 画像と倍率

Question

私の新しいコンピューターの解像度は2880x1800ピクセルで、画面の倍率は175％です。会社のWebページで気付いたのは、会社のロゴが非常にピクセル化されていることです。訪問者が高い結果の画面と画面の拡大率を持っているときに、純粋なCSSまたはHTMLで「検出」して、より高い解像度のロゴを表示するにはどうすればよいでしょうか。Javascriptに依存する必要があります-そしてこれを行うことさえ可能ですか？

Answer 1

解決するのは簡単な問題ではありません。いくつかのオプションがあります。これがクリス・コイエのまとめです。

個人的には、表示されているサイズの約1.5倍の画像を使用するDaveRupertの方法に従います。それは確かに最も簡単で正直な解決策です。

img {width: 200px; height: 200px;}​

<img src="http://placehold.it/300x300" />​

デモ

Answer 2

次のコードを使用できます。

<link rel="stylesheet" media="screen and (min-device-width: 1500px)" href="1500.css" />

これは、水平解像度が 1500 ピクセルを超えるデバイスのみをターゲットにします。

ブラウザーのズームを検出するのはそれほど単純ではありません。このSOの質問はそれを適切に処理すると思います。