検証ツールの動きが異なる

HTML,SCSSでサイトを作ってます。
基本的に単位をremで指定して、横幅にあわせてフォントサイズなどを可変にしようと思ってます。
検証ツールで見ると動きは正常なのですが、なぜか検証ツールを閉じて実際のサイトを見てみると、remで指定していたフォントサイズが可変になりません。

検証ツールの画面と、閉じたときの画面をスクリーンショットでとってあるので、そちらを下記に添付いたします。
横幅はほとんど同じで、倍率も同じで設定しております。

【実際の画面】
![

【検証ツールの画面】

「実際の画面」のところから検証ツールを開くと、フォントサイズが拡大されます。

検証ツールの動きを、実際のサイトに反映させるにはどうすればいいんでしょうか？
remで可変にするために、 <meta name="viewport" content="target-densitydpi=device-dpi, width=1440" />を指定しています。
検証ツールではremが正常に機能しており、それを閉じると機能しなくなっているのではないかと個人的に思っているのですが、そんなことあり得るのか疑問に思っています。

下記にコードを添付しますので、ご助言いただけますと幸いです。

【追記】
色々自分でいじってみますと、どうやらmetaタグに設定した<meta name="viewport" content="target-densitydpi=device-dpi, width=1440" />こちらの指定が、検証ツールでは効いているが、実際の画面では効いていないようです。

実際の画面でも、上記の指定はできるやり方はあるのでしょうか？
画面幅を変えたときに、全く同じレイアウトになるようにするために指定したものになります。
よろしくお願いいたします。

HTML
1    <div class="header-section">
2      <div class="header-container">
3        <p class="logo-content">LogoName</p>
4        <ul class="header-list">
5          <li><a href="works">works</a></li>
6          <li><a class="header-link" href="flow">flow</a></li>
7          <li><a class="header-link" href="aboutus">about us</a></li>
8          <li><a class="header-link" href="blog">blog</a></li>
9          <li><a class="header-link" href="contact">contact</a></li>
10        </ul>
11        <p class="header-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
12      </div>
13    </div>

SCSS
1html {
2  font-size: 62.5%;
3}
4
5p,
6a {
7  color: #333;
8  text-decoration: none;
9}
10
11body {
12  height: 5000px;
13}
14
15// ヘッダー
16.header-section {
17  width: 140rem;
18  margin-top: 6rem;
19  padding-left: 10rem;
20  padding-right: 10rem;
21  box-sizing: border-box;
22  .header-container {
23    max-width: 120rem;
24    width: 100%;
25    margin: 0 auto;
26    display: flex;
27    justify-content: space-between;
28    position: fixed;
29
30    .logo-content {
31      font-size: 2rem;
32      font-family: "Cormorant Garamond", serif;
33      font-weight: bold;
34    }
35    .header-list {
36      display: flex;
37      font-size: 1.4rem;
38      font-family: "Cormorant Garamond", serif;
39      font-weight: bold;
40      li {
41        margin-right: 1.5rem;
42        position: relative;
43        .header-link::before {
44          content: "・";
45          position: absolute;
46          top: 0.15rem;
47          left: -1.3rem;
48        }
49      }
50    }
51  }
52  .header-text {
53    font-size: 1.2rem;
54    position: relative;
55    top: -2rem;
56  }
57}
58
59
60