使用PHP和/或JavaScript检测iPhone4 retina显示屏

Question

我正在创建一个检测脚本，可以在用户访问我的网站时嗅探出任何具有视网膜显示屏（目前仅限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
    }
?>

有没有人找到更好的方法来做这件事，或者有任何改进这个脚本的建议。这个脚本确实可以工作，只是感觉很不规范。

- Corey

Answer 1

在javascript中正确的方法是：

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

- Simon Rolin

Answer 2

你可以像这里描述的那样使用CSS3媒体查询，但这只能让你在客户端添加额外的CSS规则，而不能调整服务器端的图像路径。这对于具有有限静态图像数量的网站非常有效。

- Matthew Sielski

---

我喜欢这种方法，因为它很简单。不过，我想要调整图片路径。 - Corey

这实际上成为了最好的解决方案。感谢您的提示。 - Corey

Answer 3

当我需要在网站上添加对Retina显示屏的支持时，我采用了一种非常“低技术”的解决方案：将所有图像的大小加倍，并将它们设置为以50％的大小显示。

不幸的是，这意味着即使设备不支持高分辨率图像，每个设备都会加载高分辨率图像，但我没有太多的图形要担心，所以这对我来说是一个很好的解决方案。

- Daniel

Answer 4

我有一种技巧，使用脚本进行正确图像的单个请求，并在没有JavaScript时回退到默认值。

1. 将您的图像放置在<noscript>标记内
2. 检测是否需要高分辨率图像（根据Simon上面的答案），读取noscript标记内img src的内容，并相应地修改路径以获取更高分辨率的图像。
3. 删除<noscript>标记。

您需要一个小型polyfil来可靠地读取所有浏览器（IE8及以下版本）中noscript标记的内容，您可以在此处找到它。

- James Westgate

Answer 5

Brian Cray有一个一行JavaScript的答案：

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

非常简单：

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

- Kent Brewster