Изменение размера шрифта в элементе относительно размера при мобильном масштабировании

Question

У меня есть страница с очень графическим (не текстовым) контентом. Я упоминаю об этом, потому что ожидается, что посетители мобильных устройств будут ущипнуть, чтобы увеличивать или уменьшать масштаб, чтобы увидеть всю страницу или сосредоточиться на небольшой детали.

<meta name="viewport" content="minimum-scale=0.3, maximum-scale=1.2"> 

На мобильных устройствах, у меня есть DIV в нижней части страницы с

.bottom-bar{ 
    position: absolute; 
    height: 10%; 
    bottom: 0; right: 0; left: 0; 
} 

поэтому он всегда будет занимать нижнюю 10% видового экрана. Это здорово, потому что я хочу разместить текст, который всегда будет виден.
Проблема в том, что когда пользователь масштабирует текст, он крошечный. Когда пользователь увеличивает масштаб текста слишком велико. Итак, я ищу решение, которое позволит мне изменить размер текста, чтобы всегда соответствовать размеру контейнера div.

fitText получил меня близко, но иногда не удалось - при масштабировании текст часто оставался большим.

Answer 1

вы можете посмотреть How to detect page zoom level in all modern browsers?, чтобы получить уровень масштабирования, а затем использовать js для изменения свойства шрифта вашего текста в инвертированном направлении. Так, если у вас есть уровень масштабирования 1,2, например, вы делите размер шрифта по умолчанию на 1.2 и получите 13.33px. Если вы установите это значение, ваш текст будет иметь тот же размер, но изображение за ним будет увеличено.