PHP4 또는 JavaScript가 포함 된 iPhone4 망막 디스플레이 감지

Question

사용자가 내 사이트에 도착하면 망막 디스플레이 (또는 이와 유사한 기술)로 모든 장치 (현재 iPhone4 만 해당)를 스니핑하는 탐지 스크립트를 만듭니다. 해상도가 더 크기 때문에 더 높은 해상도의 이미지/그래픽을 밀어 넣어야합니다. 유일한 해결책은 (PHP와 JavaScript를 사용하여) devicePixelRatio을 탐지하고 쿠키를 설정하는 것입니다.

<?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 
    } 
?> 

사람이이 일을 더 나은 방법을 건너 또는이 스크립트를 개선 제안 사항이 있습니다 : 여기에 내가 사용하고있는 코드입니다. 이 스크립트는 효과가 있습니다. 단지 더럽다고 느낍니다.

Answer 1

here과 같은 CSS3 미디어 쿼리를 사용할 수 있지만이 방법을 사용하면 클라이언트 측 CSS 규칙을 추가 할 수 있으며 서버 측 이미지 경로는 조정할 수 없습니다. 이는 제한된 수의 정지 이미지가있는 사이트에서 효과적입니다.

Answer 2

사이트에 망막 디스플레이에 대한 지원을 추가해야 할 때 매우 낮은 기술 솔루션을 구현했습니다. 나는 모든 이미지의 크기를 두 배로 늘려 크기를 50 %로 표시하도록 설정했습니다.

불행히도, 모든 장치가 고해상도 이미지를 지원하지 않더라도로드하는 것을 의미했지만 걱정할 그래픽이별로 없었기 때문에 좋은 해결책이었습니다.

Answer 3

브라이언 크레이는 한 줄의 자바 스크립트 답이 있습니다

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

을 그것은이 쉽다 :

var retina = window.devicePixelRatio > 1 ? true : false; 

Answer 4

브라이언 크레이의 대답은 거짓이 될 것으로 보인다.

자바 스크립트에서이 작업을 수행 할 수있는 올바른 방법이다 : 나는 어떤 자바 스크립트를 사용할 수없는 경우 기본값으로 다시 떨어지는 스크립트를 사용하여 올바른 이미지에 대한 하나의 요청을 내가 사용하는 기술이

var retina = window.devicePixelRatio && window.devicePixelRatio >= 2; 

Answer 5

. (위 사이먼의 대답에 따라) 고해상도 이미지를 필요로하는 경우 <NOSCRIPT> 태그

내부 이미지가 NOSCRIPT 태그 내부의 img SRC의 내용을 읽고 이상으로 경로를 수정 감지

1. 장소 고해상도 이미지.
2. <noscript> 태그를 제거하십시오.

당신은 확실하게 당신이 here