Mac 和 Windows CSS 之间的差异

Question

当我在 Mac 上的 Chrome 上查看此页面时，h1 文本在一行上，并随着桌面屏幕上的视口正确缩放。但是，在 Windows 机器上的 Chrome 中，h1 文本分成两行。我不确定操作系统/浏览器默认样式之间有什么区别，但我希望始终将文本大小正确缩放为桌面的一行（后面有金条）。我正在将 Foundation 6 用于一些响应式课程

Mac 屏幕截图 View Mac Screenshot

Windows 屏幕截图 View Windows Screenshot

HTML

<div id="video-header-container">
    <video loop muted autoplay>
        <source src="/img/home/tu-web-header.webm" type="video/webm">
        <source src="/img/home/tu-web-header.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <video loop muted autoplay class="hide-for-medium">
        ## <source src="/img/home/tu-web-header.webm" type="video/webm">
        <source src="/img/home/tu-web-header-vertical.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div id="video-header-text">
        <h1 class="white-text position-relative margin-bottom-0">ON<br class="hide-for-large"> PURPOSE</h1>
        <div class="button-group stacked-for-medium margin-top-1 align-center">
            <a class="button" href="/visit">Schedule Your Visit</a>
            <a class="button" href="/accepted/deposit-housing">Make Your Deposit</a>
        </div>
    </div>
</div>

CSS

    #video-header-container {
        position: relative;
        height: calc(100vh - 70px);
    }
    @media (min-width: 1024px) {
         #video-header-container {
            height: calc(100vh - 165px);
         }
    }
    #video-header-container::before {
        content:"";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.2);
    }
    #video-header-container video {
        position: absolute;
        background: var(--tu-purple);
        width: 100%;
        height:100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    
    #video-header-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #video-header-text h1 {
        font-family: var(--font-sans);
        font-weight: bold;
    }
    #video-header-text h1::before {
        content:'';
        background-color: var(--tu-gold);
        position: absolute;
        top: .45em;
        height: .5em;
        left: -5rem;
        right: -5rem;
        z-index: -1;
    }
    @media (max-width: 1023px) {
        #video-header-text h1 {
            font-size: 3.75rem;
        }
        #video-header-text h1::before {
            left: 3rem;
            right: 3rem;
        }
        #video-header-text h1::after {
            content:'';
            background-color: var(--tu-gold);
            position: absolute;
            bottom: .4em;
            height: .5em;
            left: -2rem;
            right: -2rem;
            z-index: -1;
        }
    }
    @media (min-width: 1024px) {
        #video-header-text h1 {
            font-size: max(4.75rem, min(7.4vw, 7.5rem));
            font-size: clamp(4.75rem, 7.49vw, 7.5rem);
        }
    }