Ошибки рендеринга размера шрифта на iPhone

Я тестирую свой сайт и отлично работаю в каждом браузере, за исключением браузера iphone (думаю, это мобильный Safari?), Который отображает фрагмент текста с большим шрифтом, который остальным , Я проверил CSS руками и использовал firebug на странице, и я могу подтвердить, что я поместил их одинаковый размер. Как это исправить?Ошибки рендеринга размера шрифта на iPhone

источник

2010-03-30 Terix

user612626 должен быть принятый ответ (144 голосов на момент написания) –

Этот ответ не существовало время, когда я написал вопрос, и я использовал отмеченный ответ. Это было 7 лет назад :) – Terix

:) Я так и предполагал. Но теперь вы можете обновить выбранный вами ответ –

155

Чтобы улучшить идею Лукаш слегка, попробуйте использовать следующее правило в вашем CSS:

body { 
    -webkit-text-size-adjust: 100%; 
}

Используя значение «100%» вместо «никто», позволяет все другие браузеры Webkit основе до сих пор изменить размер текст при использовании функции масштабирования при сохранении исходного размера шрифта.

источник

2011-02-11 07:23:51 user612626

Awesome решение, спасибо –

Это отлично работает для iPhone 4s, спасибо – ngplayground

это правильный ответ! – scruffian

Mobile Safari пытается адаптировать контент, чтобы по умолчанию он был доступен для чтения - он имеет разные стили по умолчанию для других браузеров.

Я не знаю точных правил - но когда дело доходит до размеров шрифта, кажется, работает так:

текста внутри абзаца, элемента списка или другого элемента «текст» : Применить стиль автора, не приспосабливаясь.
Текст внутри DIV или другого неспецифического элемента: Рассматривайте как «обычный текст» и «адаптируйте» размер в соответствии с правилами Mobile Safari.

Итак - короткий ответ, оберните текст в абзаце и примените к нему правило размера шрифта.

Вот быстрый и грязный пример:

<!-- Recommended: Put this in an external stylesheet --> 
<style type="text/css"> 
    p { font-size:10px; } 
</style> 

<div class="appro_body"> 
    <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai 
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in vista delle elezioni a 
    Sindaco. 
    ... 
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a> 
    </p> 
</div>

(очевидно, вы должны переместить font-size правило в файле CSS).

источник

2010-03-30 20:12:09 Beejamin

Отдайте тело font-size:100%, , затем используйте метод «em», чтобы задать размер шрифта для каждого элемента вашего сайта.

Это сделает размер шрифта 100% размера шрифта по умолчанию соответствующего браузера. Например, браузер Safari для iPhone имеет 12px = 1em (при выключении вы должны проверить размер шрифта по умолчанию локально). Тогда, если вы хотите иметь размер шрифта 10px, просто разделите его на 12, т.е. «0.83em»

Надеюсь, вы понимаете, также ищите «css em unit», вы получите лучшее представление.

источник

2010-10-01 13:12:20 Chandrakant

Есть ли документация на бит '12px = 1em'? Я пытаюсь понять, почему iOS не работает, как и предполагалось, с моими мультимедийными запросами на основе em. Если это правильно, то это и есть причина. – doubleJ

Поместите такое правило в вашем CSS и ваша проблема исчезла:

body { 
    -webkit-text-size-adjust: none; 
}

EDIT: Лучше раствор, обеспечивается user612626, заключается в использовании 100% стоимости, а не нет.

источник

2010-11-14 17:14:01

Следует быть осторожным с этим методом. Было обнаружено, что он предотвращает изменение размера текста во всех браузерах на основе Webkit, когда используется функция увеличения/уменьшения. Таким образом, он блокирует любую возможность расширения текста на веб-странице. –

Я установил этот же вопрос с:

<meta name="viewport" content="width=device-width">

С HTML5Boilerplate В настоящее время это ответ here

источник

2013-04-02 17:41:08

Ошибки рендеринга размера шрифта на iPhone

ответ

Смежные вопросы