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

注意： 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一点都没有。我是什么原因不要将它包含在列表中 “浏览器”。

我尝试将“所有”样式表节点移到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)'?>

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

我如何才能有一个样式表适用于掌上电脑，另一个适用于“其他人”。

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 and up：

'320 and Up'阻止移动设备从下载桌面资产使用小屏幕的样式表作为它的出发点。
Lessframework：

Less Framework是一个CSS网格系统用于设计自适应网站。它包含4个布局和3套排版预设，全部基于a 单格。

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

2 个答案: