自动缩放元素以适应视口/设备方向答案

【问题标题】：Automatically scale element to fit viewport / device orientation自动缩放元素以适应视口/设备方向
【发布时间】：2016-04-23 23:57:14
【问题描述】：

我有以下标记：（简化）

<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
  <div class="wrapper">
    <div class="content"> (absolutely positioned stuff) </div>
  </div>
</body>

具有以下样式：

.wrapper {
   width: 100%;
   height: 100%;
}

.content {
  width: 640px;
  height: 640px;
  margin: 0 auto;
  position: relative;
  background-color: orange;
}

在桌面（屏幕大于 640 像素 x 640 像素）上，我的正方形位于顶部和中心，看起来不错。在移动人像上，我的正方形是顶部并填充了宽度，这也很好，完全可以接受。然而，在移动横向（屏幕高度小于 640 像素）上，我的正方形会填满整个宽度，用户需要滚动才能看到正方形的底部，这是不可接受的。

我想要实现的是使正方形适合屏幕的高度，以便在横向视图中可以完整地看到它。我现在正在尝试一些媒体查询，看看是否有帮助。否则，实现这一目标的最佳方法是什么？

我尝试将.content 更改为height: 100%，但由于它的大部分内容都是绝对定位的，它们最终的高度为0px。因此，理想情况下，正方形的大小仍应为 640 像素 x 640 像素，只是缩放以适应屏幕，以便内容可以保留。

谢谢。

【问题讨论】：

标签： html ios css responsive-design media-queries

【解决方案1】：

这是视口单元的理想情况。其中 100vw 是视口的宽度，100vh 是视口的高度。

您应该能够找到更多关于不同单位的信息here。

需要注意的一点是，使用与高度相关的视口单位可能会对 Mobile Safari 和 Mobile Chrome 产生一些奇怪的影响，因为视口高度会随着滚动而改变。多年来，移动设备上的 Chrome 和 Safari 在这方面的各种行为都发生了变化，因为它们试图为您找到理想的解决方案。我发现如果我需要依赖 vh 单位，我经常使用一点 javascript 或 css 来将对象“锁定”在移动设备上的那个高度。

如果您在此Stack Overflow Post 中遇到该问题，您可以找到其他提示

【讨论】：