像Gmail/Ymail这样的HTML格式的iPad拆分视图？

众所周知，iPad不支持该元素，但Gmail和Ymail都可以通过创建一个2pane样式来实现类似的功能，左边的navi窗格可以以iPad样式滚动。请问是否有人知道它是如何产生的

---

非常感谢。

我真的不知道他们是怎么做到的。我似乎无法通过桌面浏览器访问mobile gmail，我也无法在我的iPad上找到查看源功能，但我怀疑这并不像看上去那么复杂

请记住，在常规浏览器中，当内容太多时，我们会得到一个滚动条。这不是iPad呈现长页面的方式。在iPad上，如果有太多的内容，我们永远不会看到滚动条，滚动是通过上下滑动内容来实现的。所以我们应该想象的是，这是两个带滚动条的窗格，因为这就是它在普通浏览器中的显示方式

从这里开始，这是一个简单得多的问题。它可能只是在标准的两列布局中浮动的两个div，每个div的溢出设置为滚动。一些超基本的东西，比如：

<div>
    {the nav list of emails goes here}
</div>
<div>
    {the currently-open email goes here}
</div>

<style>
div {
    float: left;
    width: 50%;
    overflow-y: scroll;
}
</style>

---

这里面可能有一些花哨的东西，让每个div消耗100%的可用高度。这可能不像高度那么简单：100%，但如果其中任何一个div包含足够的内容，我们将得到单独的垂直滚动条，iPad将隐藏这些滚动条，我已经测试了我自己的一些应用程序，这些应用程序都是用帧构建的。它们都工作正常。你确定你的HTML没有使用错误的Doctype吗？

带有overflow-y:scroll的单个块元素只能在iPad上用两个手指滚动。事情就是这样

那么Gmail是如何做到这一点的呢？使用JavaScript手动响应各种触摸事件

目前你最好的选择是使用。与Gmail和其他人的实现相比，这曾经有点不顺利，但最新版本确实不错。试试他们的

它可以在iPad/iPhone、Android上运行，你甚至可以用鼠标在普通浏览器中使用它。当你到达可滚动区域的顶部/底部时，它有很好的弹性效果，并且它有iOS风格的滚动指示器，在滚动期间显示在右边。它几乎和在本地应用程序上滚动一样平滑

顺便说一句，如果你想查看一个特定于iPad的网站的源代码，最简单的方法就是使用Safari，我已经在Mac的5.0.3上尝试过了，但可能也适用于其他平台。打开“开发”菜单Safari>Preferences>Advanced，然后可以将用户代理设置为iPad

---

你可以在Firefox中做同样的事情，假装成iPad，但我经常发现这些网站看起来完全崩溃了。我认为这是因为许多iPad/Android特定网站依赖Gecko中没有的Webkit功能。事实上，苹果的网站也使用了双窗格滚动技术，如果你不是一个发送iOS用户代理字符串的用户，而不是一个使用Webkit的用户，它会简单地拒绝你。而且Chrome也没有一个简单的方法来改变你的用户代理字符串。因此，Safari是检查此类网站的最简单方法

这不会导致两个手指在一个div内滚动吗？Gmail是一个手指滚动。不知道他们是怎么做到的。