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

【问题标题】：How to set width of a text character fixed in any device with CSS & HTML如何使用 CSS 和 HTML 设置在任何设备中固定的文本字符的宽度
【发布时间】：2020-10-01 00:35:03
【问题描述】：

我想在任何设备上以相同的像素宽度显示我的文本区域中的文本。意味着我想以像素为单位设置包机宽度，这在任何设备（桌面/移动设备）中都是唯一的。

<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 字体属性可以设置来摆脱这个问题或任何其他解决方案？

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

【问题讨论】：

标签： html css fonts textarea text-width

【解决方案1】：

最后我意识到移动浏览器添加了一些额外的字母间距来增加文本的可读性。所以在我的情况下，这就是为什么我得到不同宽度的文本，这些文本只有在移动设备中具有相同的字体大小。（我的意思是移动设备作为智能手机）所以我添加了一些 JavaScript 代码，它只在移动设备中减少行距.我的问题解决了。它按我的预期工作。

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

感谢所有帮助我的人

【讨论】：

【解决方案2】：

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

<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>

【讨论】：

感谢您的回复。但我必须以像素为单位获得相同的文本大小。实际宽度因设计而异并不重要，因为我正在使用实时代码编辑器来讨论小组中的编程。我必须以像素为单位将光标位置发送给其他查看者，因为要绘制形状。
我的问题是当我在某个字符下画一条线时，由于字符宽度的这种不平等，移动查看器会在正确的垂直位置和错误的水平位置得到一条线。无论字符高度和其他 PC 查看器（例如：当我在第 2 行移动查看器中的第 44 个字符下绘制一条线时，在第 2 行第 43 个字符下绘制一条线），由于此绘图选项，我应该使用像素.
这能回答你的问题吗？ Specify width in characters
对不起。不，我之前注意到了

【解决方案3】：

<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（viwport 宽度）用于响应式文本，将宽度百分比值用于响应式宽度。

【讨论】：

我的代码是一个示例来演示我的问题。不是我真正的项目。我正在开发一个实时代码编辑器，以便在小组中讨论编程。我必须以像素为单位将光标位置发送给其他查看器，因为要绘制形状。我的问题是当我在其他观众的某个单词中画一个圆圈时，由于字符宽度的这种不平等，圆圈在错误的位置。由于这个绘图选项，我应该使用像素。