6

How can I add a stylesheet dedicated only for iOS mobile devices?

I want to run a website which contains flash. Obviously flash elements won't work on iPhone, iPod and iPad. Due to this fact I would like to create a CSS file ONLY for these devices. I am mostly worried about iPad, as i can use @media screen size properties for other two.

What I have so far is this:

var IS_IPAD = navigator.userAgent.match(/iPad/i)  != null;

if(IS_IPAD)    ({
      url: href,
      dataType: 'css',
      success: function(){                  
            $('<link rel="stylesheet" type="text/css" href="'+css/ipad.css+'" />').appendTo("head");
        }
});

What is not working here?

GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
Piotr Ciszewski
  • 1,691
  • 4
  • 30
  • 53
  • `css/ipad.css` is not a valid variable. `$('').appendTo("head");` ? – Venkata Krishna Nov 12 '13 at 14:42
  • FYI, Android doesn't support Flash by default, either, and some people choose not to run Flash if they can help it. It might be a good idea to reconsider whether you actually need Flash for what it is that you're looking to do, and if you still want to use it, to detect the absence of Flash instead of a specific platform. – Shauna Nov 12 '13 at 15:16

2 Answers2

9

you could do something like this:

var is_ios = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );

which would return true or false.

then: 

if(is_ios)    
{
 $('<link rel="stylesheet" type="text/css" href="css/ipad.css" />').appendTo("head");
};

UPDATE:

A different approach, instead of using userAgent detection, would be to test for browser support. You can do it with jQuery like this:

$('html').addClass(typeof swfobject !== 'undefined' && swfobject.getFlashPlayerVersion().major !== 0 ? 'flash' : 'no-flash');

This works in a "Modernizr" style way of adding a class to the html tag of the document, so in your css you can do this:

 html.flash .element {
 /*Do something here if flash if enabled*/
 }

 html.no-flash .element {
 /*Do something different here if flash if not available*/
 }
wf4
  • 3,727
  • 2
  • 34
  • 45
2

Why not just this:

var is_ipad = navigator.userAgent.match(/iPad/i) ? true : false;

if(is_ipad)
  $('<link rel="stylesheet" type="text/css" href="path/to/css.css" />').appendTo('head');
Bn Mk
  • 164
  • 1
  • 13