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

发布于 2024-11-06 04:37:14 字数 712 浏览 6 评论 0原文

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

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

I'm creating a detection script that sniffs out any device (currently only iPhone4) with a retina display (or similar) when a user arrives at my site. Because the resolution is greater, I need to push higher res images/graphics. The only solution that I can find (using PHP and JavaScript) is to detect the devicePixelRatio and set a cookie. Here is the code that I am using:

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

Has anyone come across a better method of doing this or have any suggestions of improving this script. This script does work, it just feels dirty.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

熊抱啵儿 2024-11-13 04:37:14

布莱恩·克雷的回答似乎是错误的。

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

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

Brian Cray answer seems to be false.

The right way to do this in javascript is:

var retina = window.devicePixelRatio && window.devicePixelRatio >= 2;
栩栩如生 2024-11-13 04:37:14

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

You could use CSS3 media queries like described here, but this will only let you add additional CSS rules client-side, not adjust the image path server-side. This would work well for a site with a limited number of static images.

妄司 2024-11-13 04:37:14

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

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

I implemented a very "low tech" solution when I needed to add support for retina display on a site:
I doubled the size of all the images and set them to display at 50% their size.

Unfortunately, it meant every device was loading high resolution images even if it didn't support them, but I didn't have a lot of graphics to worry about, so it was a good solution for me.

空气里的味道 2024-11-13 04:37:14

Brian Cray 有一个一行 JavaScript 答案:

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

就这么简单:

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

Brian Cray has a one-line JavaScript answer:

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

It's this easy:

var retina = window.devicePixelRatio > 1 ? true : false;
牵强ㄟ 2024-11-13 04:37:14

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

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

您将需要一个小的 Polyfil 来可靠地读取所有浏览器(IE8 及以下)中 noscript 标签的内容,您可以找到它 这里

I have a technique I use which makes a single request for the correct image using script, falling back to a default when no javascript is available.

  1. Place your image inside a <noscript> tag
  2. Detect if you require high res images(as per Simon's answer above) read the contents of the img src inside the noscript tag and modify the path to the higher res image accordingly.
  3. Remove the <noscript> tag.

You will need a small polyfil to reliably read the contents of noscript tags across all browsers (IE8 and below) which you can find here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文