一般HTML结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta name="viewport"  content="width=device-width, minimum-scale=1,  maximum-scale=1">
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <link rel="stylesheet"  href="css/iuapmobile.um-2.7.0.css">
  8.         <link rel="stylesheet"  href="css/font-icons.css">
  9.         <script src="js/Frameworks/iuapmobile.frameworks.core-2.7.0.js" ></script>
  10.         <script src="js/jquery-2.1.4.min.js" ></script>
  11.         <script src="js/Frameworks/iuapmobile.frameworks.ui-2.7.0.js" ></script>
  12.     </head>
  13.     <body>
  14.         <div class="um-page" id="index">
  15.             <div class="um-header" >
  16.                 <h3>导航栏</h3>
  17.                 <a href="#" class="um-header-right ti-settings"></a>
  18.             </div>
  20.             <div class="um-content">
  21.                 在该处编辑您的页面...
  22.             </div>
  24.             <div class="um-footer"></div>
  25.         </div>
  26.     </body>
  27. </html>

在 iuapmobile.um-2.7.0中，我们对框架中的某些关键部分增加了对移动设备友好的样式,其一开始就是对移动设备友好的。为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。

  1. <meta name="viewport" content="width=device-width,initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

  1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">

项目中需要引入iuapmobile.um-2.7.0文件

class 属性 描述
um-page (必填项),为页面的最外层，代表页面整体，一个html可以有多个um-page页面，但一般只有一个处于激活状态，默认为第一个um-page页面
um-header ( 必填项),放在um-page内，为该页面的头部导航栏，在该页面起到导航效果
um-content (必填项)放在um-page内，为该页面的主要内容区，可在该区域编辑页面的内容,默认具有左右内填充15px，若要去除，可在其元素上添加um-content-fill样式类
um-footer (可选值),放在um-page内，为该页面的底部工具栏，可放置该页面的工具条。
注意：um-header，um-content，um-footer必须放置在um-page内，在um-content内编写你的页面
文档更新时间: 2018-01-12 16:17