Text shows up tiny on mobile safari until refresh

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%;
}

I currently have this CSS for a responsive mobile page I'm working on. Upon initial load, the text is tiny for some reason. Upon a refresh or two, it's back to the size it should be. I can't figure out why. I set the webkit adjust so Safari shouldn't be doing this. Is there a property I'm missing?

Before Refresh:

After Refresh:

Solution

You forgot to add this to your head tag

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

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