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

我正在为iPhone/iTouch设备添加一个备用样式表。最初我只想使用

掌上电脑

媒体类型：

<?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'?>

不幸的是，iPhone的Safari浏览器不支持手持媒体类型。苹果建议的解决办法是使用CSS3媒体查询，取代手持设备：

media='handheld'

通过检测类似iPhone的设备的查询：

注意：480px是翻转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'?>

但是ie和Chrome继续只使用

屏幕和（最大设备宽度：480px）

媒体类型

---

---

如何让一个样式表应用于手持设备，另一个样式表应用于“其他所有人”

不太熟悉XML实现，但我刚刚读了一篇很好的文章，介绍了如何使用媒体属性（不包括IE用户）或使用javascript来实现

它的简短之处在于，您为

添加了一个ID，类似于：

---

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

不太熟悉XML实现，但我刚刚读了一篇关于仅使用媒体属性（不包括IE用户）的好文章，或者使用javascript

它的简短之处在于，您为

添加了一个ID，类似于：

---

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

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

• :
  “320及以上”可防止移动设备 从下载桌面资产 使用小屏幕的样式表作为 它的起点

• :
  Less框架是一个CSS网格系统 用于设计自适应网站。信息技术 包含4个布局和3套 排版预设，全部基于 单一网格

---

以下是一些解决此问题的项目，这些项目对此问题很感兴趣：
• :
  “320及以上”可防止移动设备 从下载桌面资产 使用小屏幕的样式表作为 它的起点

• :
  Less框架是一个CSS网格系统 用于设计自适应网站。信息技术 包含4个布局和3套 排版预设，全部基于 单一网格

//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 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'?>

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