CSS中的iPad特定代码 [英] iPad specific code within CSS

问题描述

我试图像播放剧本一样排版文字。
我在网站上使用以下代码。

I am trying to typeset text like a screenplay. I am using the following code for this 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的特定部分？

I noticed that the iPad does not display indented text (padding) the same way as safari on my desktop does. There's a discrepancy of about 0.5em. Is there a way to have indentation universally apply the desktop, iPad, and iPhone? Is there a way to target specific sections of the above CSS for the iPad only?

推荐答案

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

The easiest solution would be to use media queries to determine when the viewer is using a display that has the screen size of the ipad, or any other device with a similar size.

@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
}

这篇关于CSS中的iPad特定代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！