html - 自动缩放元素以适应视口(viewport)/设备方向
<p><p>我有以下标记:(简化)</p>
<pre><code><meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
<div class="wrapper">
<div class="content"> (absolutely positioned stuff) </div>
</div>
</body>
</code></pre>
<p>具有以下样式:</p>
<pre><code>.wrapper {
width: 100%;
height: 100%;
}
.content {
width: 640px;
height: 640px;
margin: 0 auto;
position: relative;
background-color: orange;
}
</code></pre>
<p>在桌面(大于 640 像素 x 640 像素的屏幕)上，我的正方形位于顶部和中心，看起来不错。在手机人像上，我的正方形是顶部并填充宽度，这也很好，完全可以接受。但是，在移动横向(屏幕高度小于 640 像素)上，我的正方形会填满整个宽度，用户需要滚动才能看到正方形的底部，这是 Not Acceptable 。</p>
<p>我想要实现的是让正方形适合屏幕的高度，以便在横向 View 中可以完整地看到它。我现在正在尝试一些媒体查询，看看是否有帮助。否则，实现这一目标的最佳方法是什么？</p>
<p>我尝试将 <code>.content</code> 更改为 <code>height: 100%</code>，但由于其大部分内容都是绝对定位的，因此它们最终的高度为 0px。因此，理想情况下，正方形的大小仍应为 640 像素 x 640 像素，只是缩放以适应屏幕，以便内容可以保留。</p>
<p>谢谢。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>这是视口(viewport)单元的理想情况。其中 100vw 是视口(viewport)的宽度，100vh 是视口(viewport)的高度。 </p>
<p>您应该能够找到有关不同单位的更多信息<a href="https://developer.mozilla.org/en/docs/Web/CSS/length" rel="noreferrer noopener nofollow">here</a> .</p>
<p>需要注意的一点是，使用与高度相关的视口(viewport)单位可能会对 Mobile Safari 和 Mobile Chrome 产生一些奇怪的影响，因为视口(viewport)高度会随着滚动而改变。多年来，移动设备上的 Chrome 和 Safari 在这方面的各种行为已经发生了变化，因为它们试图为您找到理想的解决方案。我发现如果我需要依赖 vh 单位，我经常使用一点 javascript 或 css 来将对象“锁定”在移动设备上的那个高度。 </p>
<p>如果您遇到此问题，您可以在此 <a href="https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome" rel="noreferrer noopener nofollow">Stack Overflow Post</a> 中找到其他提示。 </p></p>
<p style="font-size: 20px;">关于html - 自动缩放元素以适应视口(viewport)/设备方向，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/34861064/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/34861064/
</a>
</p>
页:
[1]