为 iPad 制作 2 窗格网络应用程序的最佳方法

Best way to do a 2 pane web app for iPad

本文关键字：应用程序 最佳 方法 网络 iPad 制作      更新时间：2023-09-26

我正在制作一个iPad网络应用程序，客户希望它有两个窗格（都是单独滚动的），就像iPad设置应用程序一样。在保持与旧版本iOS兼容的同时解决此问题的最佳方法是什么？

谢谢！

编辑：我忘了提到它应该看起来有点原生，所以没有两根手指滚动。

你可以只使用两个容器元素（例如DIV）并使用以下样式

#first,
#second {
  float: left;
  height: 500px; // or whatever fits your needs
  width: 50%;
  overflow-y: scroll   
}

请注意，在 iOS 中溢出的内容在 Web 应用程序中使用时需要用两根手指滚动，并且不可能像在本机应用程序中那样用一根手指执行此操作。 另请参阅 Safari 网页内容指南

这可以通过让 2 个<div>元素分别占据屏幕的 50% 并单独控制它们的溢出以滚动来完成。

在最简单的 css 中，如下所示就足够了：

#left{
    width:50%;
    height:300px;
    float:left;
    overflow-y:scroll   
}
#right{
    width:50%;
    height:300px;
    float:left;
    overflow-y:scroll    
}

我将它们分开，以便您可以分别控制左侧和右侧（即，您可能希望左侧为 40%，右侧为 60%）。或者，也许您想要左侧固定和右侧滚动）。

这是一个演示这种工作的jsfiddle：http://jsfiddle.net/tFJeS/1/

相关文章：