iPad / iPhone CSS Text: Stretch 100%?

Is it possible to get text to display 1:1 on an iPad and an iPhone?

I have the following bit of code:

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

#splash h3{color:#fff;text-align:center;top:30%;text-align:center;position:absolute;font-size:138.5%;background-color:#000;padding:10px;text-shadow:2px 2px rgba(82,50,73,.9);}

img{width:100%;}

<img src="myImage.png" alt="">
<h3>Some Copy</h3>

If you note, I set top:30%. That works great and shows exactly the same开发者_如何学运维 spot on iPad as it does on iPhone. Also, the img stretches 100% on both platforms, no problem. I can not get similar results with the h3 tag, however.

I'm wondering if there's a way for text to dsisplay exactly the same ratio on iPhone and iPad?

Why would you want to do this? Users of smaller devices like the iPhone are used to zoom in to increase the font size on web pages.

You could of course target such smaller devices with CSS3 media queries and just give them a bigger font size:

#splash h3 {
font-size:15px;
}

@media only screen and (max-device-width: 480px) {

#splash h3 {
font-size:30px;
}

}