小屏设备不遵循CSS绝对文本尺寸？已设置text-size-adjust: none

问题描述 #

我制作了一个用于评估视力的网页，展示一系列字号逐渐缩小的随机单词，支持切换明暗主题、多种字体及字重。使用HTML的style属性搭配绝对单位pt控制文本尺寸，但在手机等小屏设备上，设置了绝对尺寸的文本远小于笔记本端——笔记本上36pt文本高半英寸，手机上仅1/4英寸。已在样式规则中添加text-size-adjust: none及各浏览器私有前缀，问题仍存在。

核心问题分析 #

移动端浏览器的设备像素比（DPR）差异、视窗渲染策略，是导致字体物理尺寸不一致的关键原因：

• pt是印刷单位，屏幕渲染依赖设备DPI，移动端DPI普遍远高于桌面端，相同pt值的文本实际物理尺寸会被压缩
• text-size-adjust仅阻止浏览器自动调整文本大小，无法修正因DPR差异导致的绝对单位渲染偏差

解决方案 #

1. 用rem结合根元素基准适配物理尺寸 #

将根元素字体大小设置为与物理尺寸绑定的基准值，再用rem作为文本单位：

html {
  /* 1rem对应1pt物理尺寸，基于96DPI基准换算 */
  font-size: calc(100vw / (96 / 72));
}

修改JavaScript中的字体尺寸设置：

function initialize_words(word_list) {
    let wordcount = word_list.length;
    const text_elt = document.getElementById("text");
    for (let j = 0; j < TEXT_SIZES.length; j++) {
        let size_elt = document.createElementNS(text_elt.namespaceURI, "p");
        size_elt.setAttribute("style",
                              "font-size: " + TEXT_SIZES[j] + "rem;");
        size_elt.appendChild(document.createTextNode("" + TEXT_SIZES[j] + " "));
        for (let i = 0; i < WORDS_PER_SIZE; i++) {
            let word = word_list[Math.floor(Math.random() * wordcount)];
            let textnode = document.createTextNode(word + " ");
            size_elt.appendChild(textnode);
        }
        text_elt.appendChild(size_elt);
    }
}

2. 锁定视口避免缩放 #

更新视口元标签，禁止用户缩放及浏览器自动调整：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 优化text-size-adjust规则 #

将属性直接应用到根元素，确保覆盖所有子元素：

html, body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

4. 动态计算适配设备像素比 #

通过devicePixelRatio获取设备DPR，换算出对应CSS像素尺寸：

function getPhysicalFontSize(pt) {
    const dpr = window.devicePixelRatio || 1;
    // 转换为匹配物理尺寸的CSS像素值
    return (pt * dpr * 96) / 72;
}

// 在initialize_words中调用使用
size_elt.setAttribute("style",
                      "font-size: " + getPhysicalFontSize(TEXT_SIZES[j]) + "px;");

代码调整补充要点 #

• 移除重复定义的TEXT_SIZES和WORDS_PER_SIZE变量
• 修正update_text函数中的拼写错误（weignt改为weight）
• 所有DOM元素变量使用const/let声明，避免全局污染

内容的提问来源于stack exchange，提问作者Mark Nahabedian