起初,我并没有开发响应式设计页面。所以我没有添加
<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 ,不需要水平滚动。
最佳答案
如果我没理解错的话,您需要开始在您的容器上设置 height:100%;
。如果将容器高度设置为 100%,它将始终采用它所在屏幕的高度。然后,将 section
高度设置为 100% 将使它们始终以屏幕尺寸的 100% 填充同一空间。这会将图像定向到 100%,但仍允许您滚动
关于css - 如何使iPad自动缩放也有溢出的大宽度元素: scroll to full displayed?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27326159/