Question

众所周知，iPad不支持<frame>元素，但Gmail和Ymail都可以通过创建2pane样式来执行类似操作，导航窗格（左侧）可以滚动（以ipad样式）。请问是否有人知道它是如何创造的？

非常感谢。

Answer 1

我实际上并不确定他们是如何做到的（我似乎无法在桌面浏览器中访问移动gmail，而且我在iPad上找不到视频源功能）但我怀疑这并不像它看起来那么复杂。

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

从那里开始，这是一个更简单的问题。它可能只是在标准的两列布局中浮动的两个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％的可用高度（它可能不像height: 100%那么简单）但是如果任一div包含足够的内容，我们将获得单独的垂直滚动条iPad会隐藏，给我们整齐的滑动滚动手势。

Answer 2

我已经测试了一些我自己的应用程序，这些应用程序是使用Frames及时构建的。他们都“正常”工作你确定你没有为你的HTML使用错误的Doctype吗？

Answer 3

overflow-y:scroll的单个块元素只能在iPad上用两根手指滚动。这就是它的方式。

那么Gmail如何做到与众不同呢？使用JavaScript手动，对各种触摸事件做出反应。

目前最好的选择是使用iScroll。这曾经有点不顺畅（与Gmail和其他人的实现相比），但最新版本非常好。试试他们的demo。

适用于iPad / iPhone，Android，您甚至可以使用鼠标在普通浏览器中使用它。当您到达可滚动区域的顶部/底部时，它具有良好的弹性效果，并且在滚动期间它具有出现在右侧的iOS风格滚动指示器。它几乎和在原生应用上滚动一样流畅。

顺便说一下，如果你想检查一个特定于iPad的网站的来源，最简单的方法就是使用Safari（我在5.0.3 for Mac上试过这个，但也可能适用于其他平台）。打开“开发”菜单（Safari＆gt;首选项＆gt;高级），然后您可以将用户代理设置为iPad。

你可以在Firefox中做同样的事情，冒充iPad，但我经常发现网站看起来完全坏了。我认为这是因为许多特定于iPad / Android的网站都依赖于Gecko中不存在的Webkit功能。事实上，Apple的iPad guide网站也使用双窗格滚动技术，如果您不是（a）发送iOS用户代理字符串和（b）使用Webkit，则拒绝您。 Chrome无法轻松更改用户代理字符串。因此，Safari是检查这类网站的最简单方法。

iPad中的iPad拆分视图如Gmail / Ymail？

3 个答案: