使用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视网膜显示检测

回答

相关问题