使用PHP和/或JavaScript的iPhone4視網膜顯示檢測

我創建了一個檢測腳本，用於在用戶到達我的網站時嗅探帶有視網膜顯示（或類似設備）的任何設備（當前只有iPhone4）。由於分辨率更高，我需要推送更高分辨率的圖像/圖形。我能找到的唯一解決方案（使用PHP和JavaScript）是檢測devicePixelRatio並設置一個cookie。下面是我使用的代碼：使用PHP和/或JavaScript的iPhone4視網膜顯示檢測

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

有沒有人碰到這樣做的更好的方法或有改善這個腳本的任何建議。這個腳本確實有效，只是感覺很髒。

來源

2011-05-06 Corey

您可以使用像描述的here這樣的CSS3媒體查詢，但這隻會讓您在客戶端添加額外的CSS規則，而不會調整服務器端的圖像路徑。這對於靜態圖像數量有限的網站來說效果不錯。

來源

2011-05-06 17:12:41

我喜歡這種方法，喜歡它的簡單可靠地讀取腳本標記的內容。不過，我想調整圖像路徑。 – Corey 2011-05-06 17:54:34

這實際上是最好的解決方案。謝謝你的提示。 – Corey 2011-06-24 16:01:11

當我需要在網站上添加對視網膜顯示的支持時，我實施了一種非常「低科技」的解決方案：我將所有圖像的尺寸加倍並將它們設置爲以其尺寸的50％顯示。

不幸的是，這意味着每個設備都會加載高分辨率圖像，即使它不支持它們，但我沒有很多圖形需要擔心，所以這對我來說是一個很好的解決方案。

來源

2011-05-06 16:57:07 Daniel

布萊恩·克雷有一行JavaScript的答案：

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

正是這種簡單：

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

來源

2012-04-11 18:52:30

布萊恩·克雷的答案似乎是假的。

在JavaScript做到這一點，正確的方法是：

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

來源

2012-04-17 17:07:21

我有一個技術我使用，這使得使用腳本正確的圖像單個請求，回落到一個默認的時候沒有JavaScript可用。

地方，如果你需要高分辨率的圖像（按照上述西蒙的回答）一個<無腳本>標籤
內部圖像檢測讀取IMG SRC的內容無腳本標籤內，並修改較高的路徑res圖像相應。
刪除<noscript>標記。

您將需要一個小polyfil在所有的瀏覽器（IE8及以下），你可以找到here

來源

2013-10-30 14:27:19

使用PHP和/或JavaScript的iPhone4視網膜顯示檢測

回答

相關問題