9

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

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

4

5 回答 5

9

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

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

var retina = window.devicePixelRatio && window.devicePixelRatio >= 2;
于 2012-04-17T17:07:21.150 回答
2

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

于 2011-05-06T17:12:41.767 回答
1

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

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

于 2011-05-06T16:57:07.597 回答
0

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

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

这很容易：

var retina = window.devicePixelRatio > 1 ? true : false;
于 2012-04-11T18:52:30.570 回答
0

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

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

您将需要一个小的 polyfil 来可靠地读取所有浏览器（IE8 及更低版本）上的 noscript 标签的内容，您可以在此处找到

于 2013-10-30T14:27:19.347 回答