Search code examples
htmlcssfontstextareatext-width

How to set width of a text character fixed in any device with CSS & HTML

I want to show the text in my text area in any device with the same width in pixels. Means I want to set the charter width in pixels which is unique in 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&#13;&#10;Hello world. How are you</textarea>
</body>
</html>

This is my code. This not show the width of text same in all devices. I have attached a screen shot. Screen Shot comparing with the view in a mobile device

I have to work with pixels because I'm creating a real time code editor with drawing tools. Are there any CSS font properties to set to get rid of this issue or any other solutions ?

Edit:- After some searching I found that behavior happens because text rendering of browser. I change text-rendering property to available options but no use.

Solution

  • Finally I realized that mobile browsers adding some extra letter spacing to increase readability of text. So In my case that's the reason why I'm getting different widths of text which are in same font size only in mobile devises.(I mean mobile devises as Smart Phones) So I add some JavaScript code which decreases line spacing only in mobile devises. My problem solved. It worked as I expected.

    <script>
        if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
            document.documentElement.style.letterSpacing = "-1px";
        }
</script>

    Thank all who trying to help me