1

I am trying to use multipage layout using jquery mobile framework, the content(HTML form) fits perfectly in mobile screen. But when I use multipage layout, the entire page block shrinks.My page includes 2 data-role pages(page blocks). It works fine in system browser, when i access the link in mobile internal browser(Samsung Note used for testing) it shrinks.This happens when i use multipage layout. 

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

1 回答 1

1

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

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

请参阅：http: //jquerymobile.com/demos/1.1.1/docs/pages/page-anatomy.html

于 2012-08-05T23:17:10.213 回答