iPad / iPhone CSS Текст: растянуть на 100%?

Question

Можно ли получить текст для отображения 1: 1 на iPad и iPhone?

У меня есть следующий бит кода:

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

Мне интересно, есть ли способ для текста в dsisplay точно такого же соотношения на iPhone и iPad?

Answer 1

Почему вы хотите это сделать?Пользователи небольших устройств, таких как iPhone, используются для увеличения масштаба, чтобы увеличить размер шрифта на веб-страницах.

Конечно, вы можете настроить таргетинг на такие меньшие устройства с помощью медиазапросов CSS3 и просто дать им больший размер шрифта:

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

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

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

}