Squeak.ru - шаблоны программирования

Как сохранить согласованность шрифтов и соблюдать масштабирование текста на Android (странная ошибка Font Boosting)

Я создаю адаптивную тему для WordPress и столкнулся с неприятной проблемой с масштабированием шрифта на Android (пробовал Chrome и Firefox на Nexus 7 KitKat и Nexus 5 Lollipop).

Краткая версия: если вы откроете следующее на Android с масштабированием текста, установленным на что-то. заголовки, кроме 100% с текстом и двумя ссылками, будут масштабироваться, а заголовок с 3 ссылками НЕТ!

<h6>Tiny header</h6>
<h6>
    <a href="#">1</a>
    <a href="#">2</a>
</h6>
<h6>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</h6>
<p>Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

http://jsfiddle.net/mishamsk/38oho1u8/3/embedded/result/

Длинная версия:

Я использую относительный размер шрифта (em), так как хочу, чтобы на моей странице учитывались настройки масштабирования текста пользователя. Размер шрифтов абзацев и заголовков определяется относительно основного текста, для которого установлено значение font-size: 100%.

Это работает как шарм на рабочем столе. Однако на Android, когда применяется масштабирование текста, шрифты не масштабируются должным образом. Некоторые шрифты увеличиваются, в то время как другие остаются очень маленькими, что нарушает макет страницы и удобочитаемость текста.

Я читал об усилении шрифтов и о том, как его отключить здесь. К сожалению, он полностью отключает масштабирование текста и устанавливает для базового шрифта значение по умолчанию, что очень плохо. Я считаю, что это слишком мало, чтобы читать на Android.

Есть ли способ преодолеть это?


Ответы:


1

Какова ваша точная разметка CSS?

Лично я использую следующее:

html{ font-size: 62.5%; /* Font size in em is equal to px by 10%. e.g. 1.4em = 14px */ }
body { font-size: 16px; font-size: 1.6em; }
h1, h2, h3 { font-size: 24px; font-size: 2.4em; }

У меня нет проблем с масштабированием на планшетах или телефонах Android.

01.06.2015
  • Более-менее похожи. В основном я описал основную проблему и способы ее избежать в своем вопросе. В конце концов, оказалось, что это не так уж и много вопросов. 02.06.2015
  • Ах, я думаю, я был сбит с толку, когда вы спросили, есть ли способ преодолеть это. Спасибо за советы! 02.06.2015
  • Ну, я надеялся, что кто-нибудь знает фокус. судя по всему - нет ;) милости просим! 02.06.2015
  • Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...