css - CSS 中的 iPad 特定代码

Question

我正在尝试像剧本一样排版文本。我正在为这个网站使用以下代码。

<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？有没有办法只针对 iPad 的上述 CSS 的特定部分？

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/的内容

它允许您根据正在嗅探的移动/操作系统/等应用特定规则并仅列出正确的类

您可以根据需要应用特定规则，例如

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

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