1

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">
Cœur
  • 37,241
  • 25
  • 195
  • 267
user1383841
  • 47
  • 7
  • possible duplicate of [Detect different device platforms using CSS](http://stackoverflow.com/questions/8037973/detect-different-device-platforms-using-css) – sandeep May 10 '12 at 05:32
  • i dont't want to device plateform or device i know device css but i want that when you open web page from home screen of your ipad device it opens in safari or websheet do you know – user1383841 May 10 '12 at 05:42

2 Answers2

0

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.

Luka Ramishvili
  • 889
  • 1
  • 11
  • 20
  • user will detect that which browser it how it will detect when we open page after adding to home screen on ipad device – user1383841 May 10 '12 at 05:31
  • You can detect user-agent *before* the page is loaded, and you are free to include any css you wish. I just don't know what programming language you use to provide a specific example. – Luka Ramishvili May 10 '12 at 05:53
  • i am using HTML5 and java script for web page – user1383841 May 10 '12 at 06:03
  • If you're not using PHP or ASP.NET or JSP or any server-side technology, then you can decide which css to load via javascript and add a tag from there, but it really should be a last resort. – Luka Ramishvili May 10 '12 at 06:06
  • how to use java script to detect that i am runing on mobile safari or websheet – user1383841 May 10 '12 at 06:07
  • Ramishvilli can you help me out in this how may i use java script for to resolve this issue please – user1383841 May 10 '12 at 06:19
  • navigator.userAgent variable contains the user-agent as a string. You can then guess if it's an iPad by testing if(navigator.userAgent.indexOf("iPad specific useragent string") >= 0){load iPad css} – Luka Ramishvili May 10 '12 at 06:24
  • http://celeritas-solutions.com/pah_brd_v1/ this is my site i want that when i press F11 it opens on full screen then it may show another css so that it should cover all area – user1383841 May 10 '12 at 06:32
  • screen.width and screen.height give you the user's monitor width/height. you can then load e.g. ./css/stylesheet-1920x1080.css or ./stylesheet.css.php?w=1920&h=1080. – Luka Ramishvili May 10 '12 at 06:40
  • see this answer (http://stackoverflow.com/a/9621681/324220) for subscribing to fullscreen events. – Luka Ramishvili May 10 '12 at 06:42
  • i did not get this how may i give this in my code or css file – user1383841 May 10 '12 at 06:42
  • no, subscribe to fullscreen event, and when it fires, you should load a different css, right? so you load different css for different screen.width/screen.height – Luka Ramishvili May 10 '12 at 06:43
  • this link is for how to move to full screen not to show different css for full screen – user1383841 May 10 '12 at 06:43
  • can you simple write a script to show me loading two css files please i am new to scripting and css please – user1383841 May 10 '12 at 06:49
  • I edited the answer to include javascript code which loads css files. But I don't know about the fullscreen API, you have to find out yourself. – Luka Ramishvili May 10 '12 at 11:36
0

If your main concern is the viewport size simply use media queries. See MDN for an easier explanation and some examples.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • In media queries we have to give height and widht which is same for ipad but when you load web page from home screen it opens on websheet without address bar that's the question i am asking how to use css for that – user1383841 May 10 '12 at 05:44