如何使桌面浏览器忽略iPhone css3媒体查询

Question

我正在为iPhone/iTouch设备提供一个备选样式表。最初，我只想简单地使用handheld媒体类型：

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>

我将其添加到DOM文档中：

//Add handheld stylesheet
ProcessingInstruction pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'");
doc.InsertBefore(pi, doc.DocumentElement);

//Default css, for everyone else
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage.xsl' media='all'");
doc.InsertBefore(pi, doc.DocumentElement);

不幸的是，iPhone的Safari浏览器不支持handheld媒体类型。苹果提出的解决方案是使用CSS3媒体查询，替换handheld。

media='handheld'

使用一个检测类似iPhone的设备的查询：

media="only screen and (max-device-width: 480px)"

注：480 is是翻转iPhone (即景观)的宽度。

因此，我在样式表链接中包含了这个媒体类型：

//Add handheld stylesheet
ProcessingInstruction pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'");
doc.InsertBefore(pi, doc.DocumentElement);

//BUG: iPhone doesn't support handheld media type. Use the CSS3 media query hack
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'");
doc.InsertBefore(pi, doc.DocumentElement);

//Default css, for everyone else
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage.xsl' media='all'");
doc.InsertBefore(pi, doc.DocumentElement);

它给出了xml：

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>

除了现在浏览器(ie8，Chrome5)开始使用“手持”xsl之外，一切看起来都很好。

“浏览器”

备注： Firefox (3.5)根本不支持用xml-stylesheet呈现xml内容。为什么我不把它包括在“浏览器”列表中呢？

我尝试将"all“样式表节点移动到iPhone特定的媒体查询之上：

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'?>

但是ie和Chrome继续使用only screen and (max-device-wisth: 480px)媒体类型。

如何让一个样式表申请手持设备，另一个样式表申请"everyone“。

Answer 1

不太熟悉XML实现，但我刚刚读了一篇很好的文章，介绍了如何使用media属性(这排除了IE用户)，或者使用javascript。

http://css-tricks.com/resolution-specific-stylesheets/

它的缺点是在<link>中添加一个ID，类似于：

<link rel="stylesheet" type="text/css" href="main.css" /> <link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

然后使用js确定浏览器窗口的大小，并根据要针对的参数使用ID作为遮罩，用适当的样式表替换href值。

Answer 2

下面是一些解决这个问题的项目，这些项目对这个问题很感兴趣：

• ：

“320及以上”阻止移动设备以小屏幕的样式表为起点下载桌面资产。

• ：

是一个用于设计自适应网站的CSS网格系统。它包含4个布局和3组排版预置，所有这些都基于一个网格。