Q:

Why are these pages with identical style tags producing different font-sizes?

I have two nearly identical web pages. In fact, I copied the code for the first and saved it as the 2nd before just modifying some of the elements in the 2nd. The styles in the style tag were left exactly the same. They are displaying different font-sizes, and I haven't the foggiest idea why.
Without getting off on tangents about what I should be doing (e.g. using a stylesheet) or nitpicking my code (unless it actually answers the question), can someone please explain why I'm getting two different styles using identical style tags?
P.S. - I know I can fiddle and get them both to have the same style, but it drives me crazy not knowing why this is happening. Believe me, I would have already had them looking the same by now if it weren't for my obsessive desire to understand things I don't understand. 
P.S.S. - Adding a meta tag for the viewport, as suggested in an answer to this question, did not work for me.
---DETAILS---
options.php, the desired style, looks like this in mobile Chrome on an LG phone...the screenshots below are from Opera (Chrome) DevTools with device toolbar toggled on with Galaxy S5 being emulated. (These screenshots are exactly what I am seeing on my real device, the LG phone):

admin.php, has noticeably smaller font-sizes. It's hard to see in these screenshots, but the img at the top stays exactly the same size. Also, notice that both screenshots are the same width:

Code for options.php (php renders it):
$admin_str = "<div class=\"a-div\"><a href=\"admin.php\">Admin Options</a></div>";

$body = "
    <div id=\"hero-img\">
       <img src=\"imgs/logo.png\">
    </div>
    <h1>Hi $esc_fName!</h1>
    <h2 id=\"subheading\">What would you like to do next?</h2>
    <div class=\"a-div\"><a href=\"abcde.php\">Record------</a></div>
    <div class=\"a-div\"><a href=\"fghij.php\">Manage -----</a></div>
    <div class=\"a-div\"><a href=\"manage.php\">Manage my account information</a></div>
    <div class=\"a-div\"><a href=\"klmnop.php\">Add a ----</a></div>
    $admin_str
    <div class=\"a-div\"><a href=\"logout.php\">Log out</a></div>
        ";
    echo <<<_END
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <title>------- Options</title>
                <meta charset='UTF-8'>
                <style>
                    body {                                  
                        font-family: sans-serif;
                        font-size: 100%;
                    }
                    #main-content {
                        width: 75%;
                        margin: 40px auto;
                    }
                    #hero-img {
                        width: 50%;
                        margin: 50px auto;
                    }
                    #subheading {
                        margin-bottom: 50px;
                    }
                    .a-div {
                        display: block;
                        margin-top: 20px;
                    }
                    a {
                        font-size: 21pt;
                        color: #000055;
                        text-decoration: none;
                    }
                    a:hover {
                        color: blue;
                    }
                    a:active {
                        background-color: #333333;
                        color: #E70B81;
                    }
                </style>
            </head>
            <body>
                <div id="main-content">
                    $body
                </div>
            </body>
        </html>
_END;

Code for admin.php (php also renders it):
$body = "
    <div id=\"hero-img\">
        <img src=\"imgs/dtlogo.png\">
    </div>
    <h1>Hi $esc_fName!</h1>
    <h2 id=\"subheading\">Administrative Options</h2>
    <div class=\"a-div\"><a href=\"appremails.php\">Add a new approved email</a></div>
    <div class=\"a-div\"><a href=\"options.php\">Back to main options</a></div>
    <div class=\"a-div\"><a href=\"logout.php\">Log out</a></div>
    ";

    echo <<<_END
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <title>Administrative Options</title>
                <meta charset='UTF-8'>
                <style>
                    body {                                  
                        font-family: sans-serif;
                        font-size: 100%;
                    }
                    #main-content {
                        width: 75%;
                        margin: 40px auto;
                    }
                    #hero-img {
                        width: 50%;
                        margin: 50px auto;
                    }
                    #subheading {
                        margin-bottom: 50px;
                    }
                    .a-div {
                        display: block;
                        margin-top: 20px;
                    }
                    a {
                        font-size: 21pt;
                        color: #000055;
                        text-decoration: none;
                    }
                    a:hover {
                        color: blue;
                    }
                    a:active {
                        background-color: #333333;
                        color: #E70B81;
                    }
                </style>
            </head>
            <body>
                <div id="main-content">
                    $body
                </div>
            </body>
        </html>
_END;

UPDATE --Per the request by Donkey Shame, here are the computed font-sizes:
_______________________________
|______|  1st pg.  |  2nd pg.  |
|______|___________|___________|
|  h1  |  40.133px |   32px    |
|______|___________|___________|
|  h2  |  36.133px |   24px    |
|______|___________|___________|
|  a   |  38.133px |   28px    |
|______|___________|___________|

UPDATE #2 --As Dejan suggested, I tried viewing the two sites in desktop mode, and they are the same even when they are not the same when viewed on mobile.
UPDATE #3 --After some tinkering, I got the two pages to have the same style when viewed on mobile. Of course, I never doubted I'd do that, and it still doesn't answer my original question regarding the original code, but it actually might have helped me to narrow it down to a very specific culprit. Here's what I did. I removed the font-size altogether from body. Then I changed the h1 and h2 both to divs. I edited the style tag to reflect those new divs. Then I set font-size: 5vw for the #heading div (the old h1). I set font-size: 3.022727vw (more on that 3.022727 later) for the #subheading div (the old h2). I set font-size: 3.5vw for the a elements. Here's where it gets strange again: If I change the 3.022727vw to 3.022726vw in both style tags, the   1st page has virtually no change (which is what should be expected), but the 2nd page does this (note how the #subheading changes the font-size of the a tags also):
admin.php - #subheading { font-size: 3.022727vw; }

admin.php - #subheading { font-size: 3.022726vw; }

A:

It seems like a user-agent scaling issue. The solution to avoid such problems is to add viewport meta tag inside the <head> section (is it necessary?):
<meta name="viewport" content="width=device-width, initial-scale=1">

Without viewport tag:

Both pages with viewport tag:

