iPad specific code within CSS

Question

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]

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?

Answer 1

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
}

Answer 2

In addition to above, you can include something like http://rafael.adm.br/css_browser_selector/

which allows you to apply specific rules based on what mobile/OS/etc is being sniffed out and just listing the correct class

you can apply specific rules for whatever you need for e.g.

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

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