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