Thanks for the suggestion. I added a demo of this using the
fontscale URL parameter: https://minnit.chat/main?embed&fontscale -- messages use
* 1.6 instead of 1.3 in your example, but the rest is as you said.
My main issue is that they can vary wildly with this setup. For instance, if I'm on the chat page directly (https://minnit.chat/main?fontscale) then it looks like this:
However, if I use chrome's devtools to simulate an iPhone 6's resolution (a common resolution of our users), then it gets very small:
If fonts are an issue, do you know if your website has the proper viewport meta tags?
Here is an example of a standard HTML page, without any viewport data:
Look at how it looks when you simulate iPhone 6:
However, if you add the
<meta name="viewport" content="width=device-width, initial-scale=1.0"> tag, then all of your font will immediately be fixed:
Suddenly, you no longer need to worry about making large headers, and all of the fonts on your website, including your Minnit Chat, will scale properly.
chatdemo-scale.html is not using the
fontscale parameter. This is in vanilla Minnit Chat. No extra CSS trickery needed -- the only difference between the two HTML files I created is the viewport tag, but it makes a huge difference.
All of this said, the best solution is for website owners to use the proper viewport tags, instead of just scaling font to simulate this experience. It makes for a better overall feel, without having comically large fonts for desktop users, and tinier fonts for mobile users. It also prevents users on some phones to have bigger fonts than users on other phones -- you're able to have a much more consistent experience.
Let me know if you have any more questions about this. I'll leave the fontscale URL parameter up for a bit, but I don't plan on it becoming a permanent feature.