Question

I have a web page, I want to detect whether it’s running on mobile safari on an ipad. If so, it should load different css files (and if it is running on websheet then it should load another css).
I am using following way for handling css but it shows only one for both:

   <link rel="stylesheet" href="main.css?v=2">

   <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">

Answer 1

Are you using a programming language to dynamically generate pages? If so, you can use user-agent sent by browser and according to it, decide which css to include.

Example:

<script type="text/javascript">
    $("#btn_load_css").click(function(){
        var w = screen.width;
        var h = screen.height;
        $(document).append("<link rel='stylesheet' "
            +" href='css/defaults.css.php?w="+w+"&h="+h+"' />");
    });
</script>

This will cause the css to load at the end of the file.