1
我想使用jquery移動框架的多頁面佈局，內容（HTML表單）完全適合移動屏幕。但是當我使用多頁面佈局時，整個頁面塊會縮小。我的頁面包含2個數據角色頁面（頁面塊）。它在系統瀏覽器中正常工作，當我訪問移動內部瀏覽器（用於測試的Samsung Note）鏈接時，它會縮小。當我使用多頁面佈局時，會發生這種情況。如何調整jquery移動多頁面佈局中的移動分辨率？
<!------Page One Starts here------>
<div data-role="page" id="chooseRecipients">
<div data-role="header" data-position="">
<table width="100%" border="0">
<tr>
<td align="left" d><img src="images/xxxxx.png" ></td>
<td align="right">
<a href="index.html" rel="external" ><img src="images/home.png" border="0" ></a>
<a href="#"><img src="images/close.png" border="0" ></a>
</td>
</tr>
</table>
</div>
<!-- /body-b -->
<br/>
<div class="head-bar" style="z-index:1;">
<div class="icon"><span class="tag-right">Your selection </span><img src="images/xxxx.png" align="absmiddle" style="padding-bottom:10px;z-index:10"></div>
</div>
<div class="ui-body ui-body-c">
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Select department</label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
<option>Select</option>
<option value="standard">HR</option>
<option value="rush">Finance</option>
<option value="express">IT</option>
<option value="overnight">Accounts</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="recipientBy" class="select">Select Recipient by</label>
<select name="recipientBy" id="recipientBy" data-native-menu="false">
<option>Select</option>
<option value="standard">Name</option>
<option value="rush">Emp Id</option>
<option value="express">Email</option>
<option value="overnight">Contact no</option>
</select>
</div>
<div data-role="fieldcontain">
<input type="text" name="searchValue" id="searchValue" placeholder="Search value" />
</div>
<div data-role="fieldcontain">
<label for="recipientData">Recipients Details</label>
<table width="100%" id="recipientData" rules="all" border="1px" cellpadding="5px;">
<tr>
<td><button data-icon="delete" data-iconpos="notext"></button></td>
<td>Rakesh Rai,</td>
<td>B1306</td>
</tr>
<tr>
<td><button data-icon="delete" data-iconpos="notext"></button></td>
<td>Vasanth Raj,</td>
<td>B1287</td>
</tr>
</table>
<span style="font-size:10px;font-style:italic"> some content</span>
</div>
</div><!-- /body-c -->
<div data-role="footer" class="ui-bar">
<a href="#recognise" data-icon="arrow-l" data-transition="flip">Back</a>
<a href="#addCitation" data-icon="arrow-r" data-transition="flip" style="float:right">Next</a>
</div>
</div>
<!------Page One Ends here------>
<!------Page Two Starts here------>
<div data-role="page" id="addCitation">
<div data-role="header" data-position="">
<table width="100%" border="0">
<tr>
<td align="left" d><img src="images/xxxx.png" ></td>
<td align="right">
<a href="index.html" rel="external" ><img src="images/home.png" border="0" ></a>
<a href="#"><img src="images/close.png" border="0" ></a>
</td>
</tr>
</table>
</div>
<!-- /body-b -->
<br/>
<div class="head-bar">
<div class="icon"><span>some content</span></div>
</div>
<div class="ui-body ui-body-c">
<div data-role="fieldcontain">
<table id="recipientData" rules="all" border="1px" cellpadding="5px;">
<tr>
<td>Rakesh Rai,</td>
<td>B1306</td>
</tr>
<tr>
<td>Vasanth Raj,</td>
<td>B1287</td>
</tr>
</table>
</div>
<div data-role="fieldcontain">
<label for="citation">Citation</label>
<textarea name="textarea" id="citation"></textarea>
<span style="font-size:10px;font-style:italic">some content</span>
</div>
</div><!-- /body-c -->
<div data-role="footer" class="ui-bar">
<a href="#chooseRecipients" data-icon="arrow-l" data-transition="flip">Back</a>
<a href="#informColleagues" data-icon="arrow-r" data-transition="flip" style="float:right">Next</a>
</div>
</div>
<!------Page Two Starts here------>
</body>