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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

这很简单：

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

Answer 5

我使用的技术使用脚本对正确的图像进行单一请求，在没有可用的javascript时回退到默认值。

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

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

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

5 个答案: