Chromium浏览器中Div宽度与window.screen.width不匹配的原因

核心原因1：错误使用window.screen.width #

window.screen.width获取的是物理屏幕的像素宽度（比如你真实电脑显示器的宽度，如1920px），而非Chromium设备模拟模式下的浏览器视口实际宽度。

在设备模拟模式中，浏览器会通过设备像素比(DPR)缩放页面，让模拟的360px设备在你的屏幕上显示。比如你的显示器DPR为2，window.screen.width返回1920px，但模拟的视口实际宽度仅360px——此时把Div宽度设为1920px，在360px的视口里自然只会显示一小部分，看起来像“仅一半宽度”。

核心原因2：缺少viewport元标签 #

你的HTML头部未添加viewport元标签，这会导致移动端模拟时页面自动缩放，进一步加剧宽度显示异常。移动端浏览器需要该标签来确定页面的布局视口宽度。

修复步骤 #

1. 替换宽度获取方式：将variables.js中的window.screen.width替换为window.innerWidth或document.documentElement.clientWidth，这两个属性获取的是当前浏览器视口的实际宽度：

// 替换原代码中的这一行
var wfull = window.innerWidth; 
// 或使用 document.documentElement.clientWidth

2. 添加viewport元标签：在HTML的<head>中插入以下标签，确保页面在设备模拟时正确适配：

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

3. 可选：优化异步加载顺序：当前proceed()函数同时调用loadComponents()和loadVars()，存在addMobileHeader未加载完成就执行的风险（依赖setTimeout不可靠）。可以调整为加载完组件脚本后再加载变量脚本：

function proceed() {
    Promise.all([
        loadScript("components_mobile.js"),
        loadScript("components_wide.js")
    ]).then(() => {
        loadVars();
    }).catch(err => {
        console.error(err);
    });
}

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