跨平台移动 webView 的良好 HTML5page 设计答案

【问题标题】：Good HTML5page designing for cross platform mobile webView(s)跨平台移动 webView 的良好 HTML5page 设计
【发布时间】：2015-12-27 03:25:12
【问题描述】：

哪些 HTML5 标签最适合构建需要在各种智能手机平台“iOS、Android、Window...”的 webViews 中运行的移动网络应用程序？

页眉中间的标题会改变，页脚的标签和按钮数量会改变，中间的内容会有很多数据输入控件（文本字段，单选组，...）所以需要垂直滚动，但页眉和页脚固定。侧边导航器在初始启动时显示，可以通过滑动手势或点击左上角☰ 菜单按钮滑出。

谢谢

这样的东西最适合吗？

   <body>
     <section id="firstpage" data-role="page">
       <div data-role="header">
         <h1>Activity</h1>
      </div>
      <div class="ui-content">
         <p>This is the content on page 1</p>
         <!-- put some kind of a table with cells here -->
      </div>
      <div data-role="footer">
         <!-- Buttons go here -->
      </div>
   </section>
</body>

【问题讨论】：

标签： html webview

【解决方案1】：

是的，这是一个很好的表现：

<body>
     <section id="firstpage" data-role="page">
       <div data-role="header">
         <h1>Activity</h1>
      </div>
      <div class="ui-content">
         <p>This is the content on page 1</p>
         <!-- put some kind of a table with cells here -->
      </div>
      <div data-role="footer">
         <!-- Buttons go here -->
      </div>
   </section>
<section id="secondpage" data-role="page">
       <div data-role="header">
         <h1>label2</h1>
      </div>
      <div class="ui-content">
         <p>This is the content on page 1</p>
         <!-- put some kind of a table with cells here -->
      </div>
      <div data-role="footer">
         <!-- Buttons go here -->
      </div>
   </section>
</body>

【讨论】：