底部在真机状态下消失

分类：MUI

我今天遇到个很尴尬的问题，三个页面，在hbuilder上显示都很正常，也没有报错，用Hbuilder云打包了一下，然后装到手机上，打开，底部木有了。。。。。不知道啥原因???
代码如下：
index的代码：里边只有头尾

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 id="title" class="mui-title">首页</h1>  
        </header>  
        <nav class="mui-bar mui-bar-tab">  
            <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">  
                <span class="mui-icon mui-icon-home"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item" href="tab-webview-subpage-chat.html">  
                <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>  
                <span class="mui-tab-label">消息</span>  
            </a>  
            <a class="mui-tab-item" href="tab-webview-subpage-contact.html">  
                <span class="mui-icon mui-icon-contact"></span>  
                <span class="mui-tab-label">通讯录</span>  
            </a>  
            <a class="mui-tab-item" href="tab-webview-subpage-setting.html">  
                <span class="mui-icon mui-icon-gear"></span>  
                <span class="mui-tab-label">设置</span>  
            </a>  
        </nav>  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init()  
            mui.init({  
            subpages:[{  
              url:'index-mind.html',//子页面HTML地址，支持本地地址和网络地址  
              id:'mind',//子页面标志  
              styles:{  
                top:'45px',//子页面顶部位置  
                bottom:'51px',//子页面底部位置  
                width:'100%',//子页面宽度，默认为100%  
                height:'100%',//子页面高度，默认为100%  
              },  
              extras:{}//额外扩展参数  
            }]  
          });  
        </script>  
    </body>  

</html>

index-mind页面代码如图：