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

Posted 2023-03-10

技术标签:

【中文标题】如何让桌面浏览器忽略 iPhone css3 媒体查询【英文标题】：How to make desktop browsers ignore the iPhone css3 media query 【发布时间】：2010-07-01 12:05:53 【问题描述】：

我正在为 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-like 设备的查询：

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

注意： 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'?>

一切似乎都很好，只是现在浏览器（ie8、Chrome5）开始使用“手持”xsl。

“浏览器”。

注意： Firefox (3.5) 不支持渲染 xml 内容 xml-stylesheet 在所有。为什么我不要将其包含在列表中 “浏览器”。

我尝试将“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) 媒体类型。

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

【问题讨论】：

【参考方案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 值替换为适当的样式表。

【讨论】：

【参考方案2】：

这里有几个解决这个问题的项目，对这个问题很感兴趣：

320 and up: