I am looking to display text in my textarea with the same width in pixels across all devices. Essentially, I want to set the character width in pixels so that it appears consistently on any device (Desktop/Mobile).
<html>
<head>
<style>
textarea {
font-style: Consolas;
font-size: 20px;
line-height: 30px;
width: 264px;
height: 60px;
border: 1px solid black;
}
</style>
</head>
<body>
<textarea>Hello world. How are you Hello world. How are you</textarea>
</body>
</html>This is the code I have been working with, but unfortunately, the text width is not consistent across different devices. I have included a screenshot for reference: Screen Shot comparing with the view in a mobile device
I need to use pixels because I am developing a real-time code editor with drawing tools. Are there CSS font properties that can help resolve this issue or does anyone have alternative solutions?
Edit:- After some research, I discovered that this behavior is due to text rendering by browsers. I tried changing the text-rendering property to other options, but it did not solve the problem.