CSS中特定于iPad的代码

Question

我试着像排版剧本一样排版文字。我在这个website中使用了以下代码。

<style type="text/css">
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 12pt;
width: 38.25em;
}
.character {  
font-family: courier new, monospace;  
color: #999999;
font-size: 12pt;
line-height: 12pt;
padding-left: 12.5em;
width: 21em;
}

[etc]

我注意到iPad不能像safari那样在我的桌面上显示缩进文本(填充)。误差约为0.5em。有没有一种方法可以使缩进通用于桌面、iPad和iPhone？有没有办法将上述CSS的特定部分仅针对iPad？

Answer 1

最简单的解决方案是使用媒体查询来确定观看者何时使用具有ipad或任何其他类似大小的设备屏幕尺寸的显示器。

@media all and (max-device-width: 768px) {
  // insert css specific to ipad portrait
}

@media all and (max-device-width: 480px) {
  // insert css specific to iphone landscape
}

@media all and (max-device-width: 320px) {
  // insert css specific to iphone portrait
}

Answer 2

除了上面的内容之外，您还可以包括http://rafael.adm.br/css_browser_selector/之类的内容

它允许您根据正在嗅探到的移动设备/OS/等应用特定的规则，并且只列出正确的类

你可以对任何你需要的东西应用特定的规则，例如

.ipad #div1 {
/* rules here */
}

.iphone #div2 {
/* rules here*/
}