Detecting the mobile Browser making request call

Question

I am trying to make a website.The Compulsion is that it should work on Iphone,Androids,Samsung Galaxy S/S2,Ipad, Samsung Galaxy Tab,etc. and must give the Same experience. Is there a way to detect what mobile browser is making the request for page and accordingly apply the CSS made for it using Jquery? I would like to strictly use HTML5, Jquery, CSS3 only.

Answer 1

Your default stylesheet at the top of the page

 <link rel="stylesheet" href="default.css" type="text/css">

Extend the jquery library to detect iphone/ipad

 <script type="text/javascript">
      jQuery.extend(jQuery.browser,
      {SafariMobile : navigator.userAgent.toLowerCase().match(/iP(hone|ad)/i) }
 );
 </script>

then check to see if the browser is of type and change the stylesheet accordingly

 <script type="text/javascript">
      $(function(){
        if($.browser.SafariMobile){
          $("link[rel=stylesheet]").attr({href : "iphone.css"});
        }
      })
 </script>

Answer 2

You'll need CSS3 media queries to detect device widths, resolutions and orientations. A good starting point for you to use is Mobile Boilerplate - http://html5boilerplate.com/mobile