Размер шрифта относительно высоты родительского поля - PullRequest
Новая
       33

Размер шрифта относительно высоты родительского поля

2 голосов
/ 11 октября 2010

У меня есть элементы уровня блока со свойством height, установленным в %.Внутри этих элементов уровня блока <span> с текстом.Пример: 

<body style="height: 100%;">
    <menu style="height: 10%;">
        <button style="display: block; height: 100%;">
            <span style="font-size: 4em; line-height: 200%;">text</span>
        </button>
    </menu>
</body>

Это выглядит довольно хорошо в мобильном браузере, за исключением того, что когда я поворачиваю устройство (то есть, когда начинается событие body.onorientationchange) текст становится слишком большим.

Итак, мой вопрос, как я могу указать размер текста относительно высоты родительского элемента?

Ответы [ 2 ]

1 голос
/ 11 октября 2010

Я столкнулся с похожими проблемами на iPhone, и проблема была не в высоте, а в опции мобильного веб-набора.

Попробуйте установить это 

body {
    -webkit-text-size-adjust: none;
}
0 голосов
/ 11 октября 2010

Это отключит изменение размера шрифта при вращении, что в значительной степени решает мою проблему.Заимствовано отсюда . 

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

ОБНОВЛЕНИЕ: изменено с точки с запятой на запятую как Отметить предлагается.

...