使用 PHP 和/或 JavaScript 检测 iPhone4 视网膜显示屏
我正在创建一个检测脚本,当用户到达我的网站时,它会嗅出任何带有视网膜显示屏(或类似设备)的设备(目前只有 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
布莱恩·克雷的回答似乎是错误的。
在 javascript 中执行此操作的正确方法是:
Brian Cray answer seems to be false.
The right way to do this in javascript is:
您可以使用 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.
当我需要在网站上添加对视网膜显示的支持时,我实现了一个非常“低技术”的解决方案:
我将所有图像的大小加倍,并将它们设置为以 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.
Brian Cray 有一个一行 JavaScript 答案:
http:// briancray.com/2011/05/05/detect-retina-displays-with-javascript/
就这么简单:
Brian Cray has a one-line JavaScript answer:
http://briancray.com/2011/05/05/detect-retina-displays-with-javascript/
It's this easy:
我使用了一种技术,它使用脚本发出对正确图像的单个请求,当没有 javascript 可用时回退到默认值。
您将需要一个小的 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.
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