iPad/iPhone CSS文本：拉伸100%？

有没有可能在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>

#飞溅h3{颜色：#fff；文本对齐：中心；顶部：30%；文本对齐：中心；位置：绝对；字体大小：138.5%；背景色：#000；填充：10px；文本阴影：2px 2px rgba（82,50,73,9）；}
img{宽度：100%；}
一些副本

如果你注意到了，我设定了最高：30%。这非常有效，在iPad上显示的位置与在iPhone上显示的位置完全相同。此外，img在两种平台上都能100%伸展，没有问题。然而，我不能用h3标签得到类似的结果

---

我想知道是否有一种方法可以在iPhone和iPad上以完全相同的比例显示文本与数据？

为什么要这样做？iPhone等小型设备的用户习惯于放大网页以增大字体大小

当然，您可以使用CSS3媒体查询将这些较小的设备作为目标，只需为它们提供更大的字体大小：

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

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

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

}