仅为iOS设备添加CSS样式表

Question

如何添加专用于iOS移动设备的样式表？

我想运行一个包含flash的网站。显然，flash元素无法在iPhone，iPod和iPad上运行。由于这个事实，我想为这些设备创建一个CSS文件。我主要担心的是iPad，因为我可以使用其他两个@media screen尺寸属性。

到目前为止我所拥有的是：

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");
        }
});

这里有什么用？

Answer 1

你可以这样做：

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

会返回true或false。

然后：

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

更新：

不同的方法，而不是使用userAgent检测，将测试浏览器支持。您可以使用jQuery这样做：

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

这是一种“Modernizr”样式，可以在文档的html标记中添加一个类，所以在你的css中你可以这样做：

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

 html.no-flash .element {
 /*Do something different here if flash if not available*/
 }

Answer 2

为什么不呢：

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');