javascript - 垂直居中的文本在移动设备上不显示中心但在桌面设备上显示中心

Question

我用 html css 和 js 制作了一个数字时钟。看这里https://ibnul.neocities.org/clock.html

我以某种方式制作了 css 代码，它应该在任何类型的设备上的框架中间显示时钟文本。 但是当我在我的移动设备上打开它时，文本不会显示在框架的中间，而是显示在靠近框架底部边缘的地方。 它看起来像这张图片 mobile view where the text does not show in the middle of the frame

但文本在桌面设备的框架中显示为中心，如下图所示 desktop view where the text shows in the middle of the frame

这是代码

function a() {
            var d = new Date(),
                h = d.getHours(),
                m = d.getMinutes(),
                s = d.getSeconds(),
                n = 'pm';
            if (h < 12) {
                n = 'am'
            }
            if (h == 0) {
                h = 12
            }
            if (h > 12) {
                h -= 12
            }
            if (h < 10) {
                h = '0' + h
            }
            if (m < 10) {
                m = '0' + m
            }
            if (s < 10) {
                s = '0' + s
            }
            document.getElementsByClassName('d')[1].textContent = h;
            document.getElementsByClassName('f')[1].textContent = m;
            document.getElementsByClassName('g')[1].textContent = s;
            document.getElementsByClassName('h')[1].textContent = n;
            setTimeout(a, 1000)
        }
        a()

        body,
        div,
        p {
            margin: 0px
        }
        .c div,
        .c p {
            line-height: 0.8;
            font-family: x
        }
        
        .c div {
            color: rgba(0, 0, 0, 0.103)
        }
        
        .c p {
            color: #000
        }
        
        .b {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(241, 239, 237)
        }
        
        .c {
            display: flex;
            align-items: baseline;
            font-size: calc(75px + 14*((100vw - 320px)/100));
            user-select: none;
            cursor: default;
            border: 3.4px solid #c4c4c4;
            border-radius: 10px;
            background: rgba(21, 41, 80, 0.062)
        }
        
        .p {
            position: relative
        }
        
        .q {
            font-size: 1em
        }
        
        .r {
            font-size: inherit
        }
        
        .s {
            position: absolute;
            top: 0;
            left: 0
        }
        
        .d {
            padding: 0.1em 0em 0.1em 0.18em
        }
        
        .f {
            padding: 0.1em 0.2em 0.1em 0em
        }
        
        .g {
            padding: 0.1em 0.2em 0.1em 0.2em
        }
        
        .u {
            font-size: 0.6em
        }
        
        .h {
            padding: 0.1em 0.2em 0.1em 0.2em
        }
        
        .v {
            font-size: 0.67em
        }
        
        @media(max-width:500px) {
            .c {
                font-size: calc(60px + 14*((100vw - 320px)/100));
                border: 2.4px solid #c4c4c4
            }
        }

    <div class=b>
        <div class=c>
            <div class='d p q'>88
                <p class='d r s'>12</p>
            </div>
            <p class='e q'>:</p>
            <div class='f p q'>88
                <p class='f r s'>00</p>
            </div>
            <div class='g p u'>88
                <p class='g r s'>00</p>
            </div>
            <div class='h p v'>am
                <p class='h s '>am</p>
            </div>
        </div>
    </div>

我无法理解发生这种情况的确切原因，因此我无法修复它。 谁能帮忙？

Answer 1

对我来说，无论是在移动端还是桌面端，文本都靠近底部并且不居中。

好像您在 Windows 机器上，其中 .woff 字体扩展以一些不同的行高呈现。您可能需要识别操作系统并相应地应用样式(行高)。