|
我有以下标记 简化)
<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 像素)上，我的正方形会填满整个宽度，用户需要滚动才能看到正方形的底部，这是 Not Acceptable 。
我想要实现的是让正方形适合屏幕的高度，以便在横向 View 中可以完整地看到它。我现在正在尝试一些媒体查询，看看是否有帮助。否则，实现这一目标的最佳方法是什么？
我尝试将 .content 更改为 height: 100%，但由于其大部分内容都是绝对定位的，因此它们最终的高度为 0px。因此，理想情况下，正方形的大小仍应为 640 像素 x 640 像素，只是缩放以适应屏幕，以便内容可以保留。
谢谢。
Best Answer-推荐答案
这是视口(viewport)单元的理想情况。其中 100vw 是视口(viewport)的宽度，100vh 是视口(viewport)的高度。
您应该能够找到有关不同单位的更多信息here .
需要注意的一点是，使用与高度相关的视口(viewport)单位可能会对 Mobile Safari 和 Mobile Chrome 产生一些奇怪的影响，因为视口(viewport)高度会随着滚动而改变。多年来，移动设备上的 Chrome 和 Safari 在这方面的各种行为已经发生了变化，因为它们试图为您找到理想的解决方案。我发现如果我需要依赖 vh 单位，我经常使用一点 javascript 或 css 来将对象“锁定”在移动设备上的那个高度。
如果您遇到此问题，您可以在此 Stack Overflow Post 中找到其他提示。
关于html - 自动缩放元素以适应视口(viewport)/设备方向，我们在Stack Overflow上找到一个类似的问题：
https://stackoverflow.com/questions/34861064/
| 
