User agent, how to have different css files for different devices automatically

Question

I have a lot of problems, trying to solve some. I have a web page, but I want to redirect only the link to the css file filtering by user agent.

`<script type="text/css" src="style.css">
 </script>`

so here where is "style.css" a vant to have "style-1.css", "style-2.css", "style-2.css", "stlye-4.css"....

i found something like this:

<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"iPod")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"iPad")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"Android")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"webOS"))) { ?>
<script type="text/javascript" src="skin_touch.js">
<?php } else { ?>
<script type="text/javascript" src="skin_mouse.js">
<?php } ?>
</script>

I think this will work, but, I get mad about this devices have different resolutions, and retina display grrr.

This my css have a menu container width:1000px, the middle width:600px, and the small one width:300px;

style-1.css will be for large display over 1000px (pc)

style-2.css will be for android tablets display over 600px to 999px

style-3.css will be for android and others phones display over 300px to 599px

style-4.css will be for iPad (1st generation & 2:1024×768 px (132 PPI), 9.7 in ) 3rd & 4th generation, & Air: 2048×1536 px (264 PPI), 9.7 in

style-5.css will be for iPhone 1,2,3 320x480; iPhone4 640x960, iPhone5 640x1136

Answer 1

This page has some examples for styling on common devices using CSS media queries

Edit: A small tip on how to emulate devices for testing in Chrome (This has saved me tones of time on styling for multiple devices)

Answer 2

<?php
    $check = 0;
    if (strpos($_SERVER['HTTP_USER_AGENT'],"Android") && strpos($_SERVER['HTTP_USER_AGENT'],"Mobile")) 
    {
        $check = 1;
        require ("./index-mobile.html");
    }
    if (strpos ($_SERVER['HTTP_USER_AGENT'],"iPhone") || strpos($_SERVER['HTTP_USER_AGENT'],"iPod"))
        {
        $check = 1;
        require ("./index-mobile.html");
        }
    if (strpos ($_SERVER['HTTP_USER_AGENT'],"iPad"))
        {
        $check = 1;
        require ("./index-ipad.html");
    }
    if (strpos ($_SERVER['HTTP_USER_AGENT'],"Android"))
    {
        if (strpos($_SERVER['HTTP_USER_AGENT'],"Mobile"))
        {
        }
        else
        {
        $check = 1;
        require ("./index-tablet.html");
        }
    }
    if ($check == 0)
    {
        require ("./index-pc.html");
    } ?>

I'm happy with this! (forgot the windows phone) it can be putted :require ("some.html");

or a sting

< script type="text/javascript" src="skin_mouse.js">