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

【问题标题】：iPad / iPhone CSS Text: Stretch 100%?iPad / iPhone CSS 文本：拉伸 100%？
【发布时间】：2011-06-01 05:31:09
【问题描述】：

是否可以让文本在 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% 拉伸，没问题。但是，我无法使用 h3 标签获得类似的结果。

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

【问题讨论】：

标签： iphone css ipad text

【解决方案1】：

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

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

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

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

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

}

【讨论】：