HTML字号未按预期生效？移动端适配问题求助

问题现象 #

• 给HTML标签设置16px字号后，用Chrome调试工具缩小屏幕宽度时，字体显示过小。
• 运行JS脚本调整字体大小时，控制台在屏幕缩小过程中始终打印980和981，直到宽度低于242px才出现数值变化。
• 尝试使用CSS媒体查询@media screen and (max-width: 768px)，同样没有效果，移动端字号依旧偏小。

尝试过的JS代码 #

function adjustFontSize() {
    console.log(window.innerWidth);
    var fontSize = window.innerWidth < 980 ? 26 : 16;
    document.documentElement.style.fontSize = fontSize + "px";
}
adjustFontSize();
window.addEventListener("resize", adjustFontSize);

尝试过的CSS代码片段 #

@media screen and (max-width: 768px) {
  /* 未补充具体样式规则 */
}

问题截图 #

完整页面代码 #

<div class="container-fluid p-4 vh-100">
        <div class="d-flex justify-content-around column-gap-3 h-100">
            {% comment %} Left Wrapper {% endcomment %}
            <div class="d-flex flex-column justify-content-between align-items-center flex-grow-1">
                {% comment %} Back Button {% endcomment %}
                <a href="" class="align-self-baseline btn btn-outline-primary rounded-4 d-flex align-items-center py-2 fs-6 fw-semibold"><span class="material-symbols-outlined fs-5 pe-2">arrow_back</span>Back to home page</a>
                {% comment %} Login Wrapper {% endcomment %}
                <form action="" class="m-0 d-flex flex-column align-items-center" method="post">
                    <span class="d-block d-lg-none fs-1 fw-medium">Welcome to Your <br> SETC <span class="text-gradient">Client Portal</span></span>
                    <div class="d-none d-lg-flex flex-column align-items-center wrapper-1">
                        <span class="fs-1 fw-medium">Welcome to IRSplus</span>
                        <span class="fs-1 fw-medium text-gradient">Client Portal</span>
                    </div>
                    <div class="d-flex flex-column align-items-center row-gap-3">
                        <div class="d-flex flex-column mt-5">
                            <div class="form-floating mb-3">
                                <input type="email" class="form-control rounded-4" id="floatingInput" placeholder="name@example.com">
                                <label for="floatingInput">Email*</label>
                            </div>
                            <div class="form-floating">
                            <input type="password" class="form-control rounded-4" id="floatingPassword" placeholder="Password">
                            <label for="floatingPassword">Enter Password</label>
                            </div>
                            <div class="d-flex mt-3 justify-content-between column-gap-5">
                            <div class="irs-checkbox">
                                <input class="inp-cbx" id="cbx-46" type="checkbox" />
                                <label class="cbx" for="cbx-46"><span>
                                    <svg width="12px" height="10px" viewbox="0 0 12 10">
                                    <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                    </svg></span><span class="fw-medium">Remember me</span>
                                </label>
                            </div>
                            <a href="" class="text-decoration-none">Forgot Password?</a>
                            </div>
                        </div>
                        <div class="d-flex flex-column mt-5 align-items-center">
                            <button type="submit" class="btn btn-primary rounded-4 d-flex align-items-center justify-content-center py-3 w-50">Login <span class="material-symbols-outlined fs-5 ps-1">arrow_outward</span></button> 
                            <span class="fs-6 mt-3">Don't have an account yet?</span>
                            <a href="" class="text-decoration-none">Register new Account</a>
                        </div>
                    </div>
                </form>
                {% comment %} Footer {% endcomment %}
                <div class="d-none d-xxl-flex w-100 justify-content-between align-items-center">
                    <span class="fs-6 text-body-secondary fw-light text-break w-50" style="white-space:pre"> 
FYI - The Portal is designed for desktop &
table users only. Mobile app coming soon.
                    </span>
                    <span class="fs-6 text-end" style="white-space:pre">
Need help? Call support at <span class="fw-semibold">(</span> 
or email at <a href="" class="text-decoration-none"></a>
                    </span>
                </div>
                <div class="d-flex d-xxl-none flex-column justify-content-between align-items-center">
                    <span class="text-center border-bottom border-2 pb-2 mb-2">Need help? Call support at <span class="fw-semibold">(312)312-3119</span>  <br> or email at <a href="mailto:support@irsplus" class="text-decoration-none">support@irsplus.com</a></span>
                    <span class="fs-6 text-body-secondary fw-light w-75 text-center">FYI - The Portal is designed for desktop & table users only. Mobile app coming soon.</span>
                </div>
            </div>
            {% comment %} Right Wrapper {% endcomment %}
            <div class="d-none d-sm-none d-md-none d-lg-flex w-50 position-relative" >
                <div class="w-100 h-100 position-absolute rounded-5" style="background-image:linear-gradient(190.06deg, rgba(57, 108, 240, 0.2) 6.22%, rgba(57, 108, 240, 0) 52.87%), linear-gradient(16.9deg, rgba(57, 108, 240, 0.4) 16.97%, rgba(57, 108, 240, 0) 51.41%);"></div>
                <img src="{% static 'images/new-design/signup/login-image.png' %}"  class="rounded-5 img-fluid object-fit-cover" alt="" srcset="">
            </div>
        </div>
    </div>

问题原因与解决方法 #

1. JS脚本异常原因 #

控制台始终打印980/981，是因为页面未设置viewport meta标签。移动端浏览器默认会模拟980px的桌面视口宽度，导致window.innerWidth无法获取实时调整的视口尺寸，直到宽度低于模拟视口的最小值才会变化。

解决：在HTML的<head>标签中添加viewport标签：

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

2. CSS媒体查询无效原因 #

• 同样是缺少viewport标签，媒体查询基于视口宽度判断，没有viewport的话，移动端视口固定为980px，max-width:768px的规则永远不会触发。
• 提供的媒体查询代码只有声明，没有具体样式规则，即使触发也无效果。

修复后的媒体查询示例：

@media screen and (max-width: 768px) {
  html {
    font-size: 20px !important;
  }
  .fs-1 {
    font-size: 1.8rem !important;
  }
  .fs-6 {
    font-size: 1rem !important;
  }
}

3. 适配建议 #

• 优先使用CSS媒体查询配合rem单位做适配，比JS更高效易维护。
• 页面使用了Bootstrap的fs-*类，这些类的字号基于根元素（html）的font-size计算，调整根元素字号可全局控制这类样式的大小。
• 若坚持使用JS，添加viewport标签后，window.innerWidth即可正确获取实时视口宽度，脚本会正常工作。

内容的提问来源于stack exchange，提问作者Tanuj Shriyan