Создание согласованного физического размера шрифта в мобильном браузере

Question

На мобильном телефоне большая часть веб-сайта моего клиента выглядит как обычная страница рабочего стола. Он не был восприимчивым, но он работает. Так как ширина тела фиксирована на 1000 пикселей, все это крошечный текст и прочее в вашем мобильном браузере. Так что это будет двойная сторона для фактического чтения содержимого.

Итак, в чем мой вопрос? Я создаю небольшую панель уведомлений для мобильных устройств. Это небольшая желтая полоса, которая скользит в нижней части веб-страницы, сообщая пользователю, что просматриваемая страница не оптимизирована для мобильных устройств. Помимо того, действительно ли вы этого хотите, я пытаюсь понять, как заставить шрифты внутри панели иметь согласованный физический размер на всех устройствах. Проблема в том, что все устройства в наши дни имеют широкий диапазон DPI. Another question Я нашел в StackOverflow дело с этим, но относится только к настольному корпусу. Мобильный - это совершенно другая игра.

Я вмешивался в mm в CSS, но несогласованность в textrendering между браузерами находится вне массива. Думаю, я мог бы это сделать, вычислив размер шрифта в px на основе плотности пикселей. Или написав кучу медиа-запросов для всех вариантов DPI. Но все это кажется глупым. Я что-то забыл? Есть ли более простой способ сделать это?

Answer 1

Используйте «em» как единицу вместо mm или px. Он автоматически адаптируется к шрифту, который использует читатель.

Пример:

p { 
font-size:1em; 
}