使用 PHP 和/或 JavaScript 进行 iPhone4 视网膜显示检测答案

【问题标题】：iPhone4 retina display detection with PHP and/or JavaScript使用 PHP 和/或 JavaScript 进行 iPhone4 视网膜显示检测
【发布时间】：2011-08-20 08:08:00
【问题描述】：

我正在创建一个检测脚本，当用户到达我的站点时，它会检测出任何带有 Retina 显示器（或类似设备）的设备（目前只有 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
    }
?>

有没有人遇到过更好的方法或有任何改进此脚本的建议。这个脚本确实有效，只是感觉很脏。

【问题讨论】：

标签： php javascript iphone browser-detection retina-display

【解决方案1】：

Brian Cray 的回答似乎是错误的。

在 javascript 中执行此操作的正确方法是：

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

【讨论】：

【解决方案2】：

您可以使用here 中描述的 CSS3 媒体查询，但这只会让您在客户端添加额外的 CSS 规则，而不是在服务器端调整图像路径。这适用于静态图像数量有限的网站。

【讨论】：

我喜欢这种方法，更喜欢它的简单性。不过，我想调整一下图片路径。
这实际上是最好的解决方案。感谢您的提示。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

Brian Cray 有一个单行 JavaScript 答案：

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

就这么简单：

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

【讨论】：

【解决方案5】：

我使用了一种技术，它使用脚本对正确的图像发出单个请求，当没有可用的 javascript 时回退到默认值。

将图像放在
检测是否需要高分辨率图像（根据上面 Simon 的回答）读取 noscript 标签内的 img src 的内容，并相应地修改高分辨率图像的路径。
删除

你需要一个小的 polyfil 来可靠地读取所有浏览器（IE8 及以下）的 noscript 标签的内容，你可以找到 here

【讨论】：