适用于iPad的简单HTML布局

Question

我正在尝试编写适用于所有设备的简单布局设计。我目前在iPad上遇到问题。整个网页不应该滚动，但iPad试图强制和滚动网站的边界外（我认为它被称为覆盖滚动，给你一个更流畅的感觉）。如果叠加滚动仍然存在，我真的没有与该问题，但主要问题是：

• 当我打开网页，并尝试滚动垂直滚动的内容（白左内容或红色正确的内容），整个网页滚动而不是div本身。

• 如果我尝试滑动滚动内容，有时会起作用，有时整个网页会再次滚动。这完全不可预测。有人可以帮我做一个蹲下的例子吗？

我想制作用于移动设备的独立的css文件是必要的。当然，我们首先使用bootstrap。

Answer 1

你必须使用特定设备的媒体查询，这是在横向或纵向模式的iPad ..try一次..你可以试试这个在同一个css文件，以及在不同的文件

@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) { /* STYLES GO HERE */}

景观

@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) { /* STYLES GO HERE */}

的iPad