jQuery移动网页走出手机屏幕答案

【问题标题】：jQuery mobile web page going out of the mobile screenjQuery移动网页走出手机屏幕
【发布时间】：2013-02-22 11:09:46
【问题描述】：

实际上我正在使用 jQuery mobile 开发一个 phonegap android 应用程序我在其中设计了一个页面，该页面将退出模拟器和设备屏幕。请帮助我搜索过但不明白如何将其保留在手机的范围内。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>

<body>

    <div data-role="page" id="device1">
        <div data-role="header" style="text-align: center;">Message one</div>
        <div data-role="content">
            <table width="100%" cellpadding="5" cellspacing="0" border="0">
                <tr>
                    <td align="left">InfodeepIndians</td>

                    <td align="right" colspan="2">3 Minutes ago</td>
                </tr>

                <tr>
                    <td colspan="3" align="justify">Samsung pioneered the trend of
                        a new breed of devices, now more commonly known as
                        'phablets',smartphones that are (almost) nearing tablets in size.</td>
                </tr>
                <tr>
                    <td align="left">By panel.</td>
                    <td align="center">21.12%</td>
                    <td align="right">21 / 30</td>
                </tr>
                <tr>
                    <td align="left" col><input type=text></td>
                    <td align="center"><input type=text></td>
                    <td align="right"><input type=text></td>
                </tr>
                <tr>
                    <td align="left" col><input type=button value="Nos Limit"></td>
                    <td align="center"><input type=button value="% delivery"></td>
                    <td align="right"><input type="button" value="% match"></td>
                </tr>
            </table>


        </div>
        <div data-role="footer" style="text-align: center;">@Copyrights</div>
    </div>
</body>
</html>

【问题讨论】：

尝试Layout gird 而不是表格。 jquerymobile.com/demos/1.2.0-beta.1/docs/content/…

标签： android cordova jquery-mobile mobile phonegap-build

【解决方案1】：

用 jQuery 灵活网格替换您的表格。

您可以使用当前的网格实现，它看起来像这样：http://jsfiddle.net/Gajotres/xftPB/

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>

<body>

    <div data-role="page" id="device1">
        <div data-role="header" style="text-align: center;">Message one</div>
        <div data-role="content">
            <div class="ui-grid-b">
                <div class="ui-block-a">InfodeepIndians</div>
                <div class="ui-block-b"></div>
                <div class="ui-block-c" style="text-align: right;">3 Minutes ago</div>
            </div><!-- /grid-b -->
            <p style="text-align:justify;">Samsung pioneered the trend of
                        a new breed of devices, now more commonly known as
                        'phablets',smartphones that are (almost) nearing tablets in size.</p>
            <div class="ui-grid-b">
                <div class="ui-block-a">By panel.</div>
                <div class="ui-block-b">21.12%</div>
                <div class="ui-block-c">21 / 30</div>
            </div><!-- /grid-b -->            
            <div class="ui-grid-b">
                <div class="ui-block-a"><input type="text"></div>
                <div class="ui-block-b"><input type="text"></div>
                <div class="ui-block-c"><input type="text"></div>
            </div><!-- /grid-b -->
            <div class="ui-grid-b">
                <div class="ui-block-a"><input type=button value="Nos Limit"></div>
                <div class="ui-block-b"><input type=button value="% delivery"></div>
                <div class="ui-block-c"><input type="button" value="% match"></div>
            </div><!-- /grid-b -->            
        </div>
        <div data-role="footer" style="text-align: center;">@Copyrights</div>
    </div>
</body>
</html>

如果您需要更好的网格灵活性，请使用 jQuery Mobile 的第 3 方网格实现：http://jeromeetienne.github.com/jquery-mobile-960/

【讨论】：

【解决方案2】：

我还没有编译代码但是你能把jquery版本改成jquery-1.7.1.min.js吗，jquery 9有很多变化。如果正确请告诉我

【讨论】：

【解决方案3】：

在 Jquery Mobile 中使用 Grids 比使用 tables 更可靠。

ui-grid-b 由 3 列组成。

这是一个例子

<div class="ui-grid-b">
<!-- First row-->
      <div class="ui-block-a"><input type=text></div>
      <div class="ui-block-b"><input type=text></div>
      <div class="ui-block-c"><input type=text></div>
<!-- Second row-->
      <div class="ui-block-a"><input type=button value="Nos Limit"></div>
      <div class="ui-block-b"><input type=button value="% delivery"></div>
      <div class="ui-block-c"><input type="button" value="% match"></div>
</div>

JSfiddle：Grids

【讨论】：