My webpage contains highly visual content rather than text. I bring this up because mobile users typically use pinch-to-zoom to view the complete page or focus on specific details.
<meta name="viewport" content="minimum-scale=0.3, maximum-scale=1.2">
For mobile devices, I have a div placed at the bottom of the page using the following CSS:
.bottom-bar{
position: absolute;
height: 10%;
bottom: 0; right: 0; left: 0;
}
This ensures that the div always occupies the bottom 10% of the screen, which is where I want to display text that remains visible. However, I encountered an issue - when zooming in, the text becomes too large and when zooming out, it becomes tiny. Therefore, I need a solution to resize the text so that it always fits the height of the container div.
I tried using fitText, but it was not entirely successful as the text often remained too large after zooming in.