我看了http://www.dotblogs.com.tw/pou/archive/2010/11/15/19449.aspx#29090 談談ScrollBar對Mobile Web Design的使用建議 ,,这篇文章,,中间内容是是可以滚动了。但是当手机纵橫翻转时,,头(header)底(footer) 隐藏了。要刷新才出来。生成APP也是一样,我现在要解决的问题是当手机翻转时,底部,或头部同时显示。,我现在测试的手机有iphone,android,,请求高手的帮忙呀,,这个项目急。。

解决方案 »

  1.   

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="CssJs/jquery.mobile-1.0a3.min.css">
    <script type="text/javascript" src="CssJs/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="CssJs/eprintJs.js"></script>
    <script type="text/javascript" src="CssJs/jquery.mobile-1.0a3.min.js"></script>
    <script type="text/javascript" src="CssJs/srcoll-v3.7.js"></script>
    <style type="text/css">
    .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top:35px !important; min-width:50px;text-align:center; }
    .nav-glyphish-example .ui-btn .ui-icon { width: 33px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
    #proIntro .ui-icon {background:url(images/botPro.png) center center no-repeat; background-size:29px 24px;}
    #ComIntro .ui-icon { background:url(images/botIntro.png) center center no-repeat; background-size:19px 24px;}
    #payMod .ui-icon { background:url(images/botPay.png) center center no-repeat; background-size:33px 24px;}
    #ComAdd .ui-icon { background:url(images/botAdd.png) center center no-repeat; background-size:24px 24px;}
    #BotContact .ui-icon { background:url(images/botContact.png) center center no-repeat; background-size:20px 24px;}
    #fileF .ui-icon { background:url(images/botfile.png) center center no-repeat; background-size:18px 24px;}
    </style>
    </head><body>
    <div data-role="page" style="background:#ffffff">
      <div data-theme="f" data-role="header" id="header"> 
          <a href="#" data-icon="arrow-l">返回</a>
          <h5 aria-level="1" role="heading" tabindex="0" class="ui-title">e-print</h5>
          <a href="#" data-icon="home">首頁</a>
      </div>
      <div data-role="content" id="wrapper">
          <div id="scroller">
           
              <p><strong>紅磡店 (Hunghom Shop)</strong></p>
              <div> 電話: <a href="javascript:phoneCallInDirect('2344')">(852)2344</a> <br>
                傳真: (852)2333 <br>
                營業時間: <br>
                星期一至星期五 09:30~19:30<br>
                星期六 09:30~18:30 <br>
                分店地址: <br>
                紅磡鶴園街2G恒豐工業大廈第一期CD5(a)地舖<br>
                Shop CD5a, G/F, Hang Fung Ind. Buliding, Phase 1,No. 2G Hok Yuen Street, Hung Hom,Kowloon.  </div>
              <img src="images/Hunghom.jpg"  onClick="mapLocation(22.311064,114.188644,'e-print','Hunghom Shop')" height="205" width="310" > 
        </div>
      </div>
      <div role="contentinfo" data-role="footer"  id="footer" class="nav-glyphish-example ui-bar-a ui-footer">
        <div role="navigation" data-role="navbar"data-type="horizontal" class="nav-glyphish-example ui-navbar" data-grid="d">
          <ul class="ui-grid-d">
            <li class="ui-block-a"> <a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-theme="f" href="productList.html" id="proIntro" data-icon="custom" rel="external"> <span class="ui-btn-text">產品介紹</span> </a> </li>
            <li class="ui-block-b"> <a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-theme="f" href="index.html" id="ComIntro" data-icon="custom" rel="external"> <span class="ui-btn-text">公司介紹</span> </a> </li>
            <li class="ui-block-c"> <a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-theme="f" href="pay.html" id="payMod" data-icon="custom" rel="external"> <span class="ui-btn-text">付款方式</span> </a> </li>
            <li class="ui-block-d"> <a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-theme="f" href="contact.html" id="BotContact" data-icon="custom" rel="external"> <span class="ui-btn-text">聯繫方式</span> </a> </li>
            <li class="ui-block-e"> <a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-theme="f" href="fileFormat.html" id="fileF" data-icon="custom" rel="external"> <span class="ui-btn-text">文件格式</span> </a> </li>
          </ul>
        </div>
      </div>
    </div>
    </body>
    </html>这是源代码