Question

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Main.css" />
    <title>Title</title>
</head>
<body>
    <div id="left-fade"></div>
    <div id="or"><p id="or">or</p></div>
    <div id="right-fade"></div>
</body>
</html>

CSS：

div#or {
position: fixed;
width: 100%;
width: 100vw;
height: auto;
top: 42.2vh;
font-size: 30px;
font-size: 8em;
font-size: 8rem;
font-family: "Effra";
text-align: center;
vertical-align: middle;
-webkit-text-size-adjust: 100%;
}

我目前有这个CSS用于我正在处理的响应式移动页面。在初始加载时，由于某种原因，文本很小。刷新一两次后，它会恢复到它应该的大小。我无法弄清楚为什么。我设置webkit调整，所以Safari不应该这样做。有遗产吗？

刷新前：

刷新后：

Answer 1

您忘记将此添加到您的头标记

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

https://css-tricks.com/snippets/html/responsive-meta-tag/

文字在移动野生动物园中显示很小，直到刷新

1 个答案: