0

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

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

这是我的代码。这不会在所有设备中显示相同的文本宽度。我附上了屏幕截图。 屏幕截图与移动设备中的视图比较

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

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

4

3 回答 3

1

我可能没有正确理解您想要什么，但我认为您希望文本在不同的屏幕尺寸上占据相同比例的空间？如果是这样，您可以使用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>

于 2020-06-11T11:35:35.407 回答
0 

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

于 2020-06-11T11:33:51.560 回答
0

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

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

感谢所有试图帮助我的人

于 2020-06-15T16:31:26.163 回答