html - 文本在移动 safari 上显示很小,直到刷新

标签 html ios css webkit

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 不应该这样做。是否有我缺少的属性?

刷新前: Before Refresh

刷新后: After Refresh

最佳答案

你忘了把这个添加到你的 head 标签中

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

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

关于html - 文本在移动 safari 上显示很小,直到刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44656057/

相关文章:

javascript - HTML5 视频 javascript 控件 - 重新启动视频

html - 使用 bootstrap 在行内将 2 张图片彼此居中

iphone - 查找扫描条形码详细信息的扫描仪SDK

javascript - 显式初始化 Jquery Mobile?

css - 具有 translateY 位置的背景剪辑文本

HTML5 按钮背景 : animated radial cooldown timer

javascript - 多个音频,当前正在使用 javascript 播放时自动停止其他音频

ios - 专门为 iOS 6 开发安全吗?

ios - SFSafariViewController:隐藏导航栏

html - 应用背景图像(父)并仍然保持背景颜色