如何在jquery mobile多页布局中调整移动分辨率？

我尝试使用jquerymobileframework使用多页布局，内容（HTML表单）非常适合移动屏幕。但是当我使用多页布局时，整个页面块会缩小。我的页面包括两个数据角色页面（页面块）。它在系统浏览器中运行良好，当我访问移动内部浏览器（用于测试的Samsung Note）中的链接时，它会收缩。当我使用多页布局时会发生这种情况

<!------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>

你的选择
选择部门
挑选
人力资源
财务
信息技术
账户
按选择收件人
挑选
名称
Emp Id
电子邮件
联系电话
收件人详细信息
拉凯什·雷，
B1306
瓦桑斯·拉吉，
B1287
一些内容


一些内容
拉凯什·雷，
B1306
瓦桑斯·拉吉，
B1287
引用
一些内容

不要忘记在头部添加以下标签：

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

---

不要忘记在头部添加以下标记：

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