21

Retinaディスプレイについて多くの質問を見つけましたが、サーバー側の回答はありませんでした。

画面に応じて異なる画像を配信したいのですが、例（PHP）：

if( $is_retina)
    $thumbnail = get_image( $item_photo, 'thumbnail_retina' ) ;
else
    $thumbnail = get_image( $item_photo, 'thumbnail' ) ;

これに対処する方法がわかりますか？

クッキーを設定するJavaScriptでのテストしか想像できません。ただし、これを設定するには最初の交換が必要です。誰かがより良い解決策を持っていますか？

クッキー設定コード：

(function(){
  if( document.cookie.indexOf('device_pixel_ratio') == -1
      && 'devicePixelRatio' in window
      && window.devicePixelRatio == 2 ){

    document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';';
    window.location.reload();
  }
})();
4

3 に答える 3

20

さて、今のところこれ以上の方法はないようですので、JS、PHP、Cookieを組み合わせた私のソリューションを次に示します。

将来もっと良い答えがあることを願っています

<?php
    if( isset($_COOKIE["device_pixel_ratio"]) ){
        $is_retina = ( $_COOKIE["device_pixel_ratio"] >= 2 );

        if( $is_retina)
            $thumbnail = get_image( $item_photo, 'thumbnail_retina' ) ;
        else
            $thumbnail = get_image( $item_photo, 'thumbnail' ) ;

    }else{
?>
<script language="javascript">
(function(){
  if( document.cookie.indexOf('device_pixel_ratio') == -1
      && 'devicePixelRatio' in window
      && window.devicePixelRatio == 2 ){

    var date = new Date();
    date.setTime( date.getTime() + 3600000 );

    document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';' +  ' expires=' + date.toUTCString() +'; path=/';
    //if cookies are not blocked, reload the page
    if(document.cookie.indexOf('device_pixel_ratio') != -1) {
        window.location.reload();
    }
  }
})();
</script>
<?php } ?>

function.phpで：

add_action( 'init', 'CJG_retina' );

function CJG_retina(){

    global $is_retina;  
    $is_retina = isset( $_COOKIE["device_pixel_ratio"] ) AND $_COOKIE["device_pixel_ratio"] >= 2;
}

次に、次のGLOBALを使用できるようになります。

global $is_retina;また$GLOBALS['is_retina'];

于 2013-03-05T21:48:28.067 に答える
10

あなたはこれを必要としている正確なユースケースを指定しておらず、クライアントがどの解像度で画像を望んでいるかを知っているサーバーのユースケースは実際にはわかりません（私の意見ではクライアントが決定する必要があります）ここに私の提案があります：

Retina.jsのようなものを使用するか、srcset属性を使用します<img src="low-res.jpg" srcset="medium-res.jpg 1.5x, high-res.jpg 2x">

このようにして、画像のブラウザキャッシュを活用することもできます。2つの異なる画像サイズに対して1つのURLがある場合、これは実行できません。自動的に作成/更新された画像キャッシュが、最終変更またはetagヘッダーを使用して機能する場合でも。

于 2017-05-06T17:36:05.330 に答える
1

正確な方法はわかりませんが、これを理解するための純粋なPHPの方法はget_browser、ブラウザーのバージョンといくつかの機能を返すを使用することです。これは、網膜上で実行されているかどうかにつながる可能性のあるいくつかの情報を伝えることができる場合があります。

http://php.net/manual/en/function.get-browser.php

さらに、どちらがデバイスについてのことを教えてくれるかを見ることができます$_SERVER['HTTP_USER_AGENT']。次に、網膜を持っているデバイスのリストが必要であり、答えを得るために比較を行います。

JSで網膜検出を行うことは、おそらくはるかに簡単で確実です。

于 2013-03-05T21:48:24.503 に答える