使用vmin和移动地址栏进行响应式设计

Question

我试图创建一些旁边的方形div（如果文本太多，可以扩展高度......但大多数时候文本不会太多）。我试图以响应的方式设置它。

在页面上滚动时，我的移动浏览器中的地址栏会一直显示和消失。当手机处于横向模式时会发生这种情况，每次地址栏开启或关闭时尺寸都会改变。这会产生非常烦人的用户体验。

我的HTML代码中包含以下视口行：

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

我的代码看起来像这样：

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

}

显然，罪魁祸首是vmin组件。如果我没有指定vmin，那么在横向模式下查看时框太大了。

有没有办法让vmin忽略地址栏并假装它不存在？如果没有，我还有什么其他选择来解决这个问题？

Answer 1

Chrome在糟糕的用户体验中添加了仅在隐藏地址栏后计算vh，vmin等值的功能。这样浏览器不会计算太多次，并且fps不会下降，但会出现jumping效果。

如果我是你，我会使用网格。您可以使用min-content高度，每行中的框将独立相同。使用repeat，auto-fill和minmax使用可以添加尽可能多的框，而无需添加额外的CSS与移动查询。 （@media ...）

编辑：

评论示例：

main {
  display: grid;
  grid-auto-rows: min-content;
  /* to each row same height:
  grid-auto-rows: 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* to center:
  justify-items: center;
  align-items: center; */
}

<main>
  <div>Hello</div>
  <div><img src="http://via.placeholder.com/100x150/000000"></div>
  <div><img src="http://via.placeholder.com/100x150/000000"></div>
  <div>World</div>
  <div>Hello</div>
  <div>World</div>
</main>

Answer 2

你（可能）是CSS3 100vh not constant in mobile browser的受害者，假设vh改变是vmin改变的原因。

可能的解决方案：

1. 使用Javascript并手动设置大小
2. 使用vmax结合aspect-ratio媒体查询来估计vmin （感觉hacky但很可能会达到你想要的效果）
3. 防止地址栏隐藏在第一位：https://stackoverflow.com/a/33953987/2422125
4. 防止地址栏出现在第一位：全屏： How to make a <div> always full screen?
5. 试试<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, user-scalable=no">
6. 使用网格而不是像qazxsw poi建议的那样（可能是最好的）