视口单位vw/vh/vmin/vmax是否不支持缩放？

Question

根据 如何正确使用CSS值视口相关长度？，我已尝试以以下方式使用视口单位，在大屏幕上自动放大一个小页面：

/* automatically magnify business-card-style page in large viewports */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 150% magnification at 75em */
  html {font-size: 2vmin;}
}

然而，当在Google Chrome中进行测试时，它使缩放功能大多停止工作。这是Chrome中的一个错误/特性吗？还是按照规范和设计的？

- cnst

---

另外，是否有任何方法可以使用CSS3 @media检测缩放，从而仅在没有缩放时应用视口单位？ - cnst

澄清：我是在谈论桌面版的Google Chrome，不是移动版。 - cnst

可能是视口单位字体大小和缩放错误：哪些浏览器受影响？的重复问题。 - Paul Sweatte

Answer 1

根据定义，vw/vh/vmin/vmax是与视口宽度相关的单位：

• vw 相对于视口宽度的1%
• vh 相对于视口高度的1%
• vmin 相对于视口较小尺寸的1%
• vmax 相对于视口较大尺寸的1%

div{
  height: 3rem;
  border: 1px solid red;
  margin: 1rem;
}

 The following div has style="width:10vh"
 <div style="width:10vh"></div>
 The following div has style="width:10vw"
 <div style="width:10vw"></div>
 
 

如果您看到这个例子，当您调整窗口大小时，div的宽度会发生变化。如果您应用缩放但视口大小不改变，则不会应用任何更改。

也许您需要检查html头部中viewport元标记中设置的任何其他属性，并检查是否阻止了缩放时应该进行的方式。本文可以帮助您检查：https://css-tricks.com/snippets/html/responsive-meta-tag/。

- jmtalarn