仅为iOS设备添加CSS样式表 [英] Add a CSS stylesheet only for iOS devices

问题描述

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

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

这里有什么用？

推荐答案

你可以这样做：

var is_ios = /（iPad | iPhone | iPod）/ g.test（navigator.userAgent）;

将返回true或false。

which would return true or false.

然后：

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

更新：

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

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

这适用于 Modernizr 将类添加到文档的 html 标签的样式方式，所以在你的CSS中你可以这样做：

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*/
 }

这篇关于仅为iOS设备添加CSS样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！