iphone - iPad/iPhone CSS 文本 : Stretch 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>

如果你注意到，我设置了 top:30%。效果很好，在 iPad 上显示的位置与在 iPhone 上显示的位置完全相同。此外，img 在两个平台上都 100% 拉伸(stretch)，没问题。但是，我无法使用 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;
}

}