Question

enter image description here 我在我的html中使用JQM表并包含所有必需的jQuery文件。请在下面找到我的代码。

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="jqueryMobile/jquery.mobile-1.4.2.min.css">
    <link type="text/css" href="jqueryMobile/jquery.mobile.inline-svg-1.4.2.min.css" rel="stylesheet">
<script src="jqueryMobile/jquery-1.10.2.min.js"></script>
<script src="jqueryMobile/jquery.mobile-1.4.2.min.js"></script>

<div data-role="page" id="pageten">
    <div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
        <h2>My Services</h2>
    </div>

    <div>
        <input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
        <input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
    </div>
    <br>
    <div data-role="content">
        <div>
            <table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;">
                <thead>
                    <tr style="font-size: 15px; text-align: center">
                        <th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
                        <th data-priority="1" style="text-align: center">Available Activation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="font-size: 15px; text-align: center">
                        <th style="text-align: center">0</th>
                        <th style="text-align: center">25</th>
                    </tr>

                    <tr style="font-size: 15px; text-align: center">
                        <th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
                    </tr>

                </tbody>
            </table>

        </div>

        </div>

    <div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">

        <div class="ui-block-a">
            <input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
            <span>Current Services</span>
        </div>

        <div class="ui-block-b">
            <input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
             <span>Add Services</span>
        </div>

        <div class="ui-block-c">
            <input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
            <span>Remove Services</span>
        </div>
    </div>
</div>

请查找图像附件，它在带有红色矩形支架的模拟器的UI屏幕上显示变形表，而它应该像绿色矩形。我没有理由为什么它变得扭曲。请帮帮我

Answer 1

您需要在桌面上使用data-mode="none"，这将保持高优先级列的完整性。并且也没有显示手动隐藏列的选项。

这是工作代码

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js">
    <link type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="pageten">
    <div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
        <h2>My Services</h2>
    </div>

    <div>
        <input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
        <input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
    </div>
    <br>
    <div data-role="content">
        <div>
            <table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;" data-mode="none">
                <thead>
                    <tr style="font-size: 15px; text-align: center">
                        <th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
                        <th data-priority="1" style="text-align: center">Available Activation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="font-size: 15px; text-align: center">
                        <th style="text-align: center">0</th>
                        <th style="text-align: center">25</th>
                    </tr>

                    <tr style="font-size: 15px; text-align: center">
                        <th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
                    </tr>

                </tbody>
            </table>

        </div>

        </div>

    <div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">

        <div class="ui-block-a">
            <input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
            <span>Current Services</span>
        </div>

        <div class="ui-block-b">
            <input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
             <span>Add Services</span>
        </div>

        <div class="ui-block-c">
            <input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
            <span>Remove Services</span>
        </div>
    </div>
</div>
</body>
</html>

希望它有所帮助。

JQM表是用android小屏幕分辨率变形的吗？

1 个答案: