视口单位vw/vh/vmin/vmax不缩放吗? [英] Are viewport units vw/vh/vmin/vmax not zoom friendly?

问题描述

根据如何正确使用CSS -values viewport-relative-lengths?，我尝试通过以下方式使用视口单位，以自动放大大型显示器上的一个小页面:

As per How to properly use css-values viewport-relative-lengths?, I've tried using viewport units in the following way, to automatically magnify a tiny page on a big monitor:

/* 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浏览器中进行测试时，它使缩放功能几乎停止了工作.

However, when tested in Google Chrome, it made the zoom feature to mostly stop working.

Chrome浏览器中的缩放功能是错误/功能，还是可以立即停止使用上面的代码?或者是设计使然并按规范执行?

Is it a bug/feature in Chrome for the zoom to immediately stop working with the above code in place, or is it by design and by the spec?

推荐答案

每个定义的AS vw/vh/vmin/vmax是与视口宽度相关的单位:

AS per definition vw/vh/vmin/vmax are units related to the viewport width:

• 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正在更改其宽度.如果您应用缩放功能，但视口尺寸不变，则不会应用任何更改.

If you see in the example, as you resize the window the divs are changing its width. If you apply zoom but the view port doesn't change size it will not apply any change.

也许您必须检查html标头中viewport元标记中设置的所有其他属性，并检查其是否阻塞了缩放比例.本文可以帮助您检查 https://css-tricks.com/snippets/html/response-meta-tag/

Maybe you have to check any additional property set in the viewport meta tag in your html header and check if its blocking the way it should scale on zoom. This article could help you to check it https://css-tricks.com/snippets/html/responsive-meta-tag/

这篇关于视口单位vw/vh/vmin/vmax不缩放吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！