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

У меня есть элементы уровня блока со свойством 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), текст становится слишком большим.

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


mobile css mobile-website mobile-webkit
person Attila O.    schedule 11.10.2010    source источник
comment
Опубликуйте свое обновление в качестве ответа и примите его. Если вы сами нашли решение, МОЖНО принять свой собственный ответ :) Я забыл о теге meta, но помните о -webkit-text-size-adjust: none;, так как я исправил очень странный размер текста. выдать на поле ввода с ним :)   -  person Marko    schedule 11.10.2010

Ответы (2)


arrow_upward
1
arrow_downward

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

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

body {
    -webkit-text-size-adjust: none;
}
person Marko    schedule 11.10.2010
comment
Хороший! Но согласно эта ссылка применима только для Mobile Safari на iOS. . Есть ли альтернатива браузеру Android по умолчанию? - person Attila O.; 11.10.2010

arrow_upward
0
arrow_downward

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

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

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

person Attila O.    schedule 11.10.2010
comment
Ответить на свой вопрос можно только через два дня, помните? Еще несколько часов впереди... - person Attila O.; 12.10.2010
comment
Если вы используете точки с запятой между аргументами содержимого, вы получите сообщение об ошибке в Safari. Он отлично работает, если вы замените точки с запятой запятыми. - person Mark; 10.12.2012
comment
@Mark Марк, я соответственно обновил ответ. Спасибо за указание на это, хотя я пока не заметил ошибки, у вас есть ссылка на это? - person Attila O.; 10.12.2012
comment
Аттила, почти везде я вижу точку с запятой вместо запятой, и это меня озадачивает. На данный момент единственная ссылка, которая у меня есть, это сам Safari (проверьте консоль ошибок). - person Mark; 11.12.2012