Question

我正在努力做一些我确信非常简单的事情，但高于我的知识或谷歌技能。我有多个页面，文本包含div中的div，如下所示：

<!doctype html>
<html>
    <head>
        <title>Page title</title>
        <meta name="viewscreen" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div>
            <div>Banner</div>
            <div>
                <div>
                    <p>&emsp;Paragraph text</p>
                    <ul>
                        <li>
                            <p>li item 1</p>
                        </li>
                        <li>
                            <p>li item 2</p>
                        </li>
                        <li>
                            <p>li item 3</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

当缩放到一个小视口时，文本看起来很小（如果更短）（我的猜测是当文本短于div宽度时会发生这种情况）。我发现我可以使用vw作为文本大小，这似乎是一种解决方法，但我仍然无法理解这种行为的原因是什么。有人能给我一个提示如何克服这个问题以及它的潜在原因是什么？

提前致谢，

艾森

Answer 1

添加名称为viewport的元标记，我认为viewscreen不是有效的元标记名称。这应该可以解决问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

试试这个

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">

div容器中div中的Tex在小视口

2 个答案: