嵌入式设备全屏Web时钟字体宽度适配问题求助

架构老林

2026-7-2

问题排查与解决方案

核心问题分析

行内元素布局特性干扰：clocktext和temptext是<span>行内元素，默认不会独占一行，text-align:center设置在span上不生效，且其offsetWidth计算受父容器布局影响，出现异常值。
浏览器重排延迟：修改fontSize后，浏览器不会立即重绘元素，直接读取offsetWidth得到的是旧值，导致尺寸计算逻辑失效。
频繁切换display引发布局混乱：反复设置display:none/block会触发频繁重排，且可能导致元素尺寸计算异常。

具体修复步骤

1. 修正元素布局与样式

给文本元素设置display: block，让text-align:center生效，同时确保offsetWidth准确反映文本实际宽度；给父容器添加居中布局样式：

修改test.html中的元素结构：

<div id='clockDiv' style='height:60%; width:100%; margin: 0 auto; display:flex; justify-content:center; align-items:center'>
    <span id="clocktext" style="font-kerning:none; display:block; text-align:center"></span>
</div>
<div id='tempDiv' style='width:100%; margin: 0 auto; display:flex; justify-content:center; align-items:center'>
    <span id="temptext" style="font-kerning:none; display:block; text-align:center"></span>
</div>

2. 优化字体尺寸计算逻辑

在修改字体大小后，强制触发浏览器重排，确保获取最新的offsetWidth；改用visibility:hidden隐藏元素（不影响布局但不显示），避免频繁切换display打乱布局：

修改test.js中的updateTextSize函数：

function updateTextSize() {
    tempFontSize = startFontSize;
    timeFontSize = startFontSize;
    
    // 先重置字体到初始值
    timeElem.style.fontSize = startFontSize + "pt";
    tempElem.style.fontSize = startFontSize + "pt";
    
    // 强制浏览器重排，确保尺寸更新
    document.body.offsetHeight;

    for (var i = 0 ; i < 3 ; i++) {
        // 计算时钟字体
        tempElem.style.visibility = 'hidden';
        const timeRatio = timeElem.offsetWidth / clockElem.offsetWidth;
        timeFontSize *= targetWidth / timeRatio;
        timeElem.style.fontSize = timeFontSize + "pt";
        document.body.offsetHeight; // 强制重排

        // 计算温度字体
        timeElem.style.visibility = 'hidden';
        tempElem.style.visibility = 'visible';
        const tempRatio = tempElem.offsetWidth / clockElem.offsetWidth;
        tempFontSize *= targetWidth / tempRatio;
        tempElem.style.fontSize = tempFontSize + 'pt';
        document.body.offsetHeight; // 强制重排

        // 恢复可见性
        timeElem.style.visibility = 'visible';
    }
}

3. 优化时钟更新逻辑

避免每次updateClock都强制调用updateTextSize，仅在文本内容变化（切换城市、时间格式变化）时调整字体，减少不必要的计算：

修改updateClock函数：

function updateClock() {
    var d = new Date();
    var seconds = d.getSeconds();
    var cityCount = cityTempArray.length;
    var showSeconds = (cityCount == 1);
    var showCity = (cityCount > 1);
    var currentCity = Math.floor(seconds/cycleLength) % cityCount;

    var cityCode = cityTempArray[currentCity][0];
    var farenheit = round(cityTempArray[currentCity][1], 0);
    var celsius = round(5 / 9 * (farenheit - 32), 1);
    var colon = (showSeconds || d.getMilliseconds() < 500) ? ':' : ' ';
    
    // 构建时间文本
    let timeText = (d.getHours() < 10 ? "0" : "") + d.getHours();
    timeText += colon + (d.getMinutes() < 10 ? "0" : "") + d.getMinutes();
    if (showSeconds) {
        timeText += colon + (d.getSeconds() < 10 ? "0" : "") + d.getSeconds();
    }
    
    // 构建温度文本
    let tempText = farenheit + 'ºF ' + celsius + 'ºC';
    if (showCity) {
        tempText += ' ' + cityCode;
    }

    // 仅当内容变化时更新并调整字体
    const needResize = timeElem.textContent !== timeText || tempElem.textContent !== tempText;
    if (needResize) {
        timeElem.textContent = timeText;
        tempElem.textContent = tempText;
        updateTextSize();
    } else {
        // 仅更新冒号闪烁（无需调整字体）
        if (!showSeconds) {
            const currentColon = timeText.charAt(2);
            if (timeElem.textContent.charAt(2) !== currentColon) {
                timeElem.textContent = timeText;
            }
        }
    }

    let time = 500 - d.getTime() % 500 + 20;
    setTimeout(updateClock, time);
}

修复效果说明

文本元素的offsetWidth现在能准确反映实际内容宽度，字体大小计算逻辑正常工作。
减少不必要的重排和计算，提升性能，适配嵌入式设备运行需求。
时钟和温度文本能正确填充页面90%宽度，切换城市时字体尺寸自动适配。

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