css - 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 上通用？有没有一种方法可以仅针对 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
}