Question

我在控制台上使用了Chrome的模拟，当我尝试在所有设备上测试我的代码时，我特别在三星Galaxy S，SII，W模拟器中获得了这种古怪的行为。我不明白为什么！

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Identification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/dataTables/media/css/jquery.dataTables.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery-1.11.2.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
<script src="../CasaElectionsMobileApp/public/dataTables/media/js/jquery.dataTables.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#datatable1').DataTable();
    } );
</script>
</head>

<body>
<div data-role="page">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Elections</h1>
    </div><!-- /header -->
    <div role="main" class="ui-content">
    </div>

        <table id="datatable1" class="display" cellspacing="0">
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>CIN</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Status</th>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>CIN</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Y</td>
                    <td>AZERTY</td>
                    <td>QWERTY</td>
                    <td>KKKKKK</td>
                </tr>
                <tr>
                    <td>Y</td>
                    <td>AZERTY</td>
                    <td>QWERTY</td>
                    <td>JJJJJJ</td>
                </tr>
            </tbody>
    </table>

    <div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="accueil.html" data-icon="home" data-transition="slide">Accueil</a></li>
                <li><a href="identificationElecteurs.html" data-icon="user" data-transition="slide">Identification</a></li>
                <li><a href="resultatsScrutin.html" data-icon="action" data-transition="slide">Résultats</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
</body>
</html>

这是输出：

Samsung S, SII, W Emulator on Chrome

当我尝试其他模拟器时：

Samsung Galaxy S4

Apple iPhone 6

无论进行何种转换，我都希望页脚导航栏能够持久保存在页面底部，我相信data-position =＆＃34; fixed＆＃34;无论我们在哪种设备上测试，都应该做到这一点，对吧？那可能是什么错？提前谢谢！

jQuery移动导航栏不仅仅适用于＆＃34;三星Galaxy S，SII，W＆＃34; Chrome上的模拟器

0 个答案: