9

ユーザーがサイトにアクセスしたときに Retina ディスプレイ (または類似のもの) を搭載したデバイス (現在は iPhone4 のみ) を検出する検出スクリプトを作成しています。解像度が高いため、より高い解像度の画像/グラフィックをプッシュする必要があります。(PHP と JavaScript を使用して) 私が見つけることができる唯一の解決策はdevicePixelRatio、Cookie を検出して設定することです。私が使用しているコードは次のとおりです。

<?php
    $imgPath = "images/";
    if(isset($_COOKIE["imgRes"])){
        $imgRes = $_COOKIE["imgRes"];
        if( $imgRes  >= 2 ){
            $imgPath = "images/highRes/";
        }
    } else {
?>
    <script language="javascript">
        var the_cookie = "imgRes="+window.devicePixelRatio+";"+the_cookie;
        document.cookie = the_cookie;
        location = '<?=$_SERVER['PHP_SELF']?>';
    </script>
<?php
    }
?>

これを行うためのより良い方法に遭遇した人はいますか、またはこのスクリプトを改善するための提案はありますか? このスクリプトは機能しますが、汚いと感じます。

4

5 に答える 5

9

ブライアン・クレイの答えは間違っているようです。

JavaScript でこれを行う正しい方法は次のとおりです。

var retina = window.devicePixelRatio && window.devicePixelRatio >= 2;
于 2012-04-17T17:07:21.150 に答える
2

こちらで説明されているように CSS3 メディア クエリを使用することもできますが、これはクライアント側で追加の CSS ルールを追加することしかできず、サーバー側で画像パスを調整することはできません。これは、静的画像の数が限られているサイトではうまく機能します。

于 2011-05-06T17:12:41.767 に答える
1

サイトに Retina ディスプレイのサポートを追加する必要があったとき、私は非常に「ローテク」なソリューションを実装しました。すべての画像のサイズを 2 倍にして、50% のサイズで表示するように設定しました。

残念ながら、それはすべてのデバイスが高解像度の画像をサポートしていなくても読み込んでいることを意味していましたが、心配するグラフィックスはあまりなかったので、私にとっては良い解決策でした.

于 2011-05-06T16:57:07.597 に答える
0

BrianCrayは1行のJavaScriptの答えを持っています：

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

これは簡単です：

var retina = window.devicePixelRatio > 1 ? true : false;
于 2012-04-11T18:52:30.570 に答える
0

私は、スクリプトを使用して正しい画像を 1 回要求し、javascript が使用できない場合はデフォルトに戻す手法を使用しています。

  1. <noscript> タグ内に画像を配置します
  2. 高解像度画像が必要かどうかを検出し（上記のサイモンの回答に従って）、 noscript タグ内の img src の内容を読み取り、それに応じて高解像度画像へのパスを変更します。
  3. <noscript> タグを削除します。

ここで見つけることができるすべてのブラウザー (IE8 以下) で noscript タグの内容を確実に読み取るには、小さな polyfil が必要です。

于 2013-10-30T14:27:19.347 に答える