I've been trying to figure out how to size an html input given a maximum number of characters given. What I've found is that everything I read is absolute hogwash. The css unit 'ch' is a JOKE!! The input is over 10 times the size it should be. 1 rem = 16 pixels. I read it over and over and over on the internet. HOGWASH! It is NOT 16 pixels, it depends on the number of characters, the font size and the font face. Here is a read out of actual conversions from rem to px for different quantities of characters, font sizes and font faces. https://codepen.io/SLSCoder/pen/WNqLyJY
As frustrating as rem or em can be they're what you need to be using to get a good result across platforms. Unless you're running an intranet and can control the devices and apps your users use you're just fighting a losing battle.
Remember, the ideal size often needs trial and error based on your specific design, so don’t be afraid to play around with the CH unit or even JavaScript to adjust dynamically. Keep experimenting, and you'll find a solution that feels just right for your project.
sarahk: I use rem, thank you. I just noticed that the 1 rem = 16 pixels is a myth. GreenHost: Yea, I'm gonna flesh this out and see what I find for cell phones and iPads. So far it's anywhere between 9.? to 13.?. The ch unit was a big disappointment. That unit is out of the question. Thanks for your responses.