使用vmin实现响应式设计时，移动端地址栏引发的布局问题

嘿，这个问题我之前做移动端项目时也踩过坑——首先得明确：vmin没法忽略地址栏的影响，因为vmin是基于当前的「可视视口」（也就是浏览器实际显示内容的区域），地址栏的显示/隐藏会直接改变可视视口的高度，vmin自然会跟着波动。不过别慌，有几个靠谱的解决方案能搞定这个布局跳动的问题：

方案1：用JavaScript获取布局视口尺寸，绑定CSS变量（兼容性最好） #

思路：布局视口（Layout Viewport）的尺寸不受地址栏显示隐藏的影响，它只和设备的屏幕尺寸相关。我们可以在页面加载和横竖屏切换时，获取布局视口的宽高，取最小值计算出方块的基准尺寸，把这个值存在CSS变量里，再用变量来定义方块的样式。

代码实现： #

首先在HTML中添加脚本：

function setSquareBaseSize() {
  // 获取布局视口的宽高（不受地址栏影响）
  const layoutWidth = document.documentElement.clientWidth;
  const layoutHeight = document.documentElement.clientHeight;
  // 取宽高中的最小值，乘以0.8对应原来的80vmin
  const squareSize = Math.min(layoutWidth, layoutHeight) * 0.8;
  // 设置CSS变量
  document.documentElement.style.setProperty('--square-size', `${squareSize}px`);
}

// 页面加载完成后初始化
window.addEventListener('load', setSquareBaseSize);
// 横竖屏切换时重新计算
window.addEventListener('resize', setSquareBaseSize);

然后修改CSS：

.block {
  width: var(--square-size);
  min-height: var(--square-size);
  margin: 5% auto;
  /* 原来的15vmin换算成比例：15/80=0.1875，用calc计算圆角 */
  border-radius: calc(var(--square-size) * 0.1875);
  padding: 20px 10px;
}

这个方案兼容所有现代浏览器，而且完全避免了地址栏带来的布局波动。

方案2：使用CSS新增的svw/svh视口单位（最简单，需考虑兼容性） #

思路：CSS在近几年新增了几个基于布局视口的单位，其中svw（Smallest Viewport Width）指的是布局视口宽高中较小值的1%，刚好替代原来的vmin，而且它不受可视视口（地址栏）的影响。

代码实现： #

直接把CSS中的vmin替换成svw即可：

.block {
  width: 80svw;
  min-height: 80svw;
  margin: 5% auto;
  border-radius: 15svw;
  padding: 20px 10px;
}

注意兼容性：这个单位支持Chrome 108+、Firefox 102+、Safari 15.4+，如果你的项目不需要兼容老版本浏览器，这是最省心的方案。

方案3：媒体查询区分横竖屏，限制最大尺寸（退而求其次的兼容方案） #

思路：如果上面两个方案都不适用，可以通过媒体查询判断横竖屏状态，分别用vw/vh来限制方块的最大尺寸，避免地址栏变化导致的尺寸突变。

代码实现： #

.block {
  /* 默认竖屏状态：宽度用百分比，最大尺寸限制为80vh */
  width: 80%;
  min-height: 80%;
  max-width: 80vh;
  max-height: 80vh;
  margin: 5% auto;
  border-radius: 15vh;
  padding: 20px 10px;
}

/* 横屏状态下，切换为用vw限制最大尺寸 */
@media (orientation: landscape) {
  .block {
    max-width: 80vw;
    max-height: 80vw;
    border-radius: 15vw;
  }
}

这个方案兼容性极佳，但精度略逊于前两个，适合对布局精度要求不高的场景。

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