如何使用 CSS & HTML 设置固定在任何设备中的文本字符的宽度

Question

我想在任何设备上以相同的像素宽度显示我的文本区域中的文本。意味着我想以像素为单位设置章程宽度，这在任何设备中都是唯一的 (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>

这是我的代码。这不会在所有设备中显示相同的文本宽度。我附上了一个屏幕截图。 Screen Shot comparing with the view in a mobile device

我必须使用像素，因为我正在使用绘图工具创建实时代码编辑器。是否有任何 CSS 字体属性可以设置以解决此问题或任何其他解决方案？

编辑：- 经过一番搜索后，我发现行为的发生是因为浏览器的文本呈现。我将 text-rendering 属性更改为可用选项但没有用。

Answer 1

<html>
<head>
    <style>
        textarea {
            font-style: Consolas;
            font-size: 7vw;
            line-height: auto;
            width: 100%;
            height: auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <textarea>Hello world. How are you&#13;&#10;Hello world. How are you</textarea>
</body>
</html>

像素可能因设备而异，您可以使用 vw（视口宽度）作为响应式文本，使用百分比值作为响应式宽度。

Answer 2

我可能没有正确理解你想要什么，但我想你希望文本在不同的屏幕尺寸上占据相同的 space 比例？如果是这样，您可以使用 vw 长度单位，它代表 视口宽度 -

<html>
<head>
    <style>
        textarea {
            font-style: Consolas;
            font-size: 6vw; /*adjust it to what you want*?
            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>

Answer 3

最后我意识到移动浏览器会添加一些额外的字母间距来增加文本的可读性。所以在我的例子中，这就是为什么我得到不同宽度的文本的原因，这些文本只有在移动设备中具有相同的字体大小。（我的意思是移动设备作为智能手机）所以我添加了一些 JavaScript 代码来减少行间距仅在移动设备中。我的问题解决了。效果如我所料。

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

感谢所有帮助我的人

如何使用 CSS & HTML 设置固定在任何设备中的文本字符的宽度

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

html

css

fonts

textarea

text-width