iPad使用滑动手势浏览全尺寸页面分区

我正在以网站的形式为一个大学项目制作一本iPad杂志，以展示我提议的设计的一些功能（现实生活中的应用程序当然是原生iOS）

我看过一些像Sencha这样的框架，它似乎对我想要的东西有些过分，似乎想在JavaScript中完成所有事情，而不是将它保留在HTML/CSS中，然后在上面添加交互。我也看过jQueryUIiPad，它似乎是最有前途的，但我可以帮助它工作。以下是it工作的演示：

以下是我的页面示例页面：

我需要的帮助是让div成排挨着坐，然后添加交互，当用户向左、向右、上下滑动时，它将在不同的div之间跳跃，就像它们是杂志的页面/部分一样

这是一幅显示div理想排列方式的图像，用户可以在各个部分之间左右移动，然后通过上下滚动在该部分内滚动

有人能帮我把这个弄好吗？谢谢你

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

---

对不起，我不能完全确定这些部门的情况。希望这有帮助。

我已经有CSS了。问题在于添加javascript交互，并让div采用我选择的网格格式。