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更改的原因。

可能的解决方案：

使用Javascript并手动设置大小
将vmax与aspect-ratio媒体查询结合使用来估算vmin
（感觉很讨厌，但最有可能达到你想要的效果）
阻止地址栏隐藏在第一位：https://stackoverflow.com/a/33953987/2422125
阻止地址栏显示在第一位：全屏：
How to make a <div> always full screen?
尝试<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, user-scalable=no">
使用网格代替androbin sugested（可能是最好的）

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

2 个答案: