如何强制CSS vw单位遵循HTML meta viewport的宽度设置？

你遇到的这个问题其实是因为原生vw单位的定义规则——它是基于**浏览器的布局视口（layout viewport）来计算的，而你设置的meta viewport width=75，本质上只是把视觉视口（visual viewport）**强制缩放到了75px的尺寸，但布局视口并没有跟着改变（尤其是在桌面浏览器上，布局视口默认就是浏览器窗口的宽度），所以原生vw自然不会理会这个meta设置。

那怎么实现你想要的效果呢？咱们可以用JavaScript结合CSS变量来模拟一个遵循自定义视口宽度的“伪vw”单位，具体步骤如下：

实现步骤 #

1. 先通过JS获取你在meta标签里设置的目标宽度（比如75）
2. 计算当前浏览器视口宽度和目标宽度的比例，把这个比例作为自定义单位的基准
3. 动态更新CSS变量，在样式里用这个变量来代替原生vw

完整示例代码 #

<meta name="viewport" content="width=75">
<style>
  /* 定义CSS变量，默认值设为1px */
  :root {
    --custom-vw: 1px;
  }
  .vw-75 {
    /* 用calc计算，75乘以自定义vw单位 */
    width: calc(75 * var(--custom-vw));
    height: calc(75 * var(--custom-vw));
    background-color: red;
  }
</style>
<div class="vw-75"></div>

<script>
  // 获取meta viewport标签里的目标宽度值
  const viewportMeta = document.querySelector('meta[name="viewport"]');
  const targetViewportWidth = parseInt(viewportMeta.content.match(/width=(\d+)/)[1]);

  // 计算并更新自定义vw单位的函数
  function updateCustomVW() {
    const currentWindowWidth = window.innerWidth;
    // 自定义vw = 当前窗口宽度 / 目标视口宽度，这样75*--custom-vw就会匹配你的预期
    const customVWValue = currentWindowWidth / targetViewportWidth;
    document.documentElement.style.setProperty('--custom-vw', `${customVWValue}px`);
  }

  // 页面加载时初始化，窗口 resize 时重新计算
  updateCustomVW();
  window.addEventListener('resize', updateCustomVW);
</script>

原理说明 #

这个方案的核心是用JS动态计算当前浏览器视口和你自定义的75px视口之间的比例，把这个比例赋值给CSS变量--custom-vw。这样不管浏览器窗口怎么变，75 * var(--custom-vw)都会始终对应你期望的“基于75px视口的75vw”效果，完美贴合你设置的meta viewport规则。

另外要补充一句：原生vw在移动设备上的表现会和桌面不同，但即使在移动设备上，它依然是基于布局视口而非你设置的width值——所以这个JS方案是跨设备通用的解决办法。

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