css - 如何使iPad自动缩放也有溢出的大宽度元素: scroll to full displayed?

Question

起初，我并没有开发响应式设计页面。所以我没有添加

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

这是我的代码:

CSS:

<style>
section {
    width: 1250px;
    height: 800px;
    background: url(http://placehold.it/1250x800) no-repeat 50% top;
}
</style>

HTML:

<div class="container">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</div>

用iPad访问这些时，<section> s 会自动缩放以适合 iPad 屏幕。您无需水平滚动即可观看完整图像。这正是我想要的。

但是，如果我添加 overflow到 .container , iPad 不再自动缩放页面:

.container {
    overflow-y: scroll;
}

我实际上要在 iPad 上实现一些滚动效果。由于 iPad 不会在滚动操作停止之前触发“窗口”的“滚动”事件，因此我必须在大 overflow-y: scroll; 中滚动页面内容。元素。

有人知道怎么解决吗？我只需要 iPad 自动缩小显示全 Angular ，不需要水平滚动。

Answer 1

如果我没理解错的话，您需要开始在您的容器上设置 height:100%;。如果将容器高度设置为 100%，它将始终采用它所在屏幕的高度。然后，将 section 高度设置为 100% 将使它们始终以屏幕尺寸的 100% 填充同一空间。这会将图像定向到 100%，但仍允许您滚动