how to Detect browser to load different templates

Hi,
I'm trying to load a different template for different devices like phones, ipads, pc etc.
I know I can get USER_AGENT of $_SERVER to find out a device type.
The problem is to maintain a long list of USER_AGENT types.

How do I do this without keeping a long list of USER_AGENT types?

The templates are all fluid designs (no fixed pixel sizes).
So basically all I need to know is if it's a wide screen PC, or a small screen phone, or an ipad (whatever size they come in), and then load appropriate template to match the width.

Any code is appreciated.
Thanks

 

you can try using jquery?

<script>
  if ($(window).width() > 1024) {
     //todo: do something here
}
else {
   //todo: load template for width of 1024, or whatever
}
</script>

PHP:

 

You don't use PHP for this. You use CSS media queries to create responsive themes. Plenty of tutorials on Google for this, including the resolutions you need to match.

 

Or just learn how to do it properly, without hacks, via CSS @media? Read up.
There are several ways to do this, but none are reliable, and every time (which is quite often) there's a new browser out, you need to update the code. Hence, use the CSS approach

 

As said above, use CSS @media

You can set the sizes of various different screens or media (print, screen, etc.)

http://www.w3schools.com/css/css_mediatypes.asp

 

You can download browscap db file and use:

http://us2.php.net/get_browser

 

I do not recommend using browscap, simply because, as I stated above, it's not possible to direct-link to it, you have to run it locally (or at least host it somewhere yourself), and that means that every time there's a new browser-version out, which the current script doesn't cover, it has to be updated (given that the script itself is updated, which happens sporadically). Depends a little bit on how specific you want to be as well, of course.

 

The proper term for this is "browser sniffing" -- and so far folks are right... Don't... JUST DON'T.

If you have to dick around server side sniffing out which browser is being used, there is probably something horrifically and disastrously wrong with both your HTML and CSS.

You should have ONE markup; that should be semantic with complete separation of presentation from content. You then use the MEDIA attribute to target specific device types, and media queries to adjust the layouts to the available space. One markup, many layoutS... no server or client side scripting involved.

... and all of said layoutS being elastic and semi-fluid.

 

If you would like to do it in PHP, not recommended. Fine the browser using PHP code and then do an if, elseif, else(other browsers) statement.