iPad / iPhone CSS文字：拉伸100％？

Question

是否可以在iPad和iPhone上显示1：1的文字？

我有以下代码：

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

如果你注意到，我设置了顶部：30％。效果很好，在iPad上显示与iPhone上完全相同的位置。此外，img在两个平台上都可以伸缩100％，没问题。但是，我无法使用h3标签获得类似的结果。

我想知道是否有办法让文字在iPhone和iPad上实现完全相同的比例？

Answer 1

你为什么要这样做？像iPhone这样的小型设备的用户用于放大以增加网页上的字体大小。

您当然可以使用CSS3媒体查询来定位这些较小的设备，并为它们提供更大的字体大小：

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

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

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

}