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.