0

最初の Retina 対応の Web サイトを作成しようとしていますが、css で画像をより高い解像度に置き換える必要があるときに問題に遭遇しました。たとえば、標準画像を背景として使用し、ユーザーが網膜マシンを使用している場合、同じ画像を高解像度で使用する方法がわかりません(現時点では、低解像度画像と高解像度画像の両方があります)。誰かが良い情報源を提案したり、これを行う方法を説明したりできますか? CSS とクロスブラウザ ソリューションが望ましいですが、javascript などでもかまいません。

4

3 に答える 3

1

CSSメディアクエリを使用できます

   device-pixel-ratio,
   min--moz-device-pixel-ratio,
   -o-min-device-pixel-ratio,
   -Webkit-min-device-pixel-ratio {
     …
   }
于 2012-12-17T14:07:39.737 に答える
0

私にとって最も簡単な解決策は、css を利用することです。あなたが言ったように背景の画像を設定する基本クラスがありますが、背景画像をより高い解像度にオーバーライドする別のクラスがあります。

これをソースとして使用すると、Retina ディスプレイであるかどうかを検出し、要素にクラスを追加できます。

http://briancray.com/posts/detect-retina-displays-with-javascript

var retina = window.devicePixelRatio > 1;
if (retina) {
    // the user has a retina display
    //add code to add the class to your element.
}
于 2012-12-17T14:07:21.660 に答える
0

サーバー側でデバイスを確認することも解決策になる可能性があります。WURFL や Tera-WURFL などのプロジェクトでは、応答する前にデバイスを認識できるため、適切な css ファイルを送信できます。

于 2012-12-17T14:09:41.260 に答える